如何添加水平线在Plottable.js中的y轴上

我在JavaScript的Plottable.js中运行下面的代码。如何添加水平线在Plottable.js中的y轴上

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 }, 
 
      { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }]; 
 

 
var xScale = new Plottable.Scales.Linear(); 
 
var yScale = new Plottable.Scales.Linear(); 
 
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom"); 
 
var yAxis = new Plottable.Axes.Numeric(yScale, "left"); 
 

 
var plot = new Plottable.Plots.Bar() 
 
    .addDataset(new Plottable.Dataset(data)) 
 
    .x(function(d) { return d.x; }, xScale) 
 
    .y(function(d) { return d.y; }, yScale) 
 
    .animated(true); 
 

 
new Plottable.Components.Table([ 
 
      [null, null], 
 
      [yAxis, plot], 
 
      [null, xAxis] 
 
     ]).renderTo("svg#example"); 
 
    
 
window.addEventListener("resize", function() { 
 
    plot.redraw(); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 

 
</head> 
 

 

 

 

 
<body> 
 
    
 

 
    <svg width="100%" height="100%" id="example"></svg> 
 

 
    <!-- Act on the thing --> 
 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 

 
</body> 
 
</html>

如下图所述，我怎么能修改我的Javascript代码，以便它可以包括y=2水平线？

来源

2016-08-02 neversaint

您可以使用Plottable.Components.GuideLineLayer：

var data = [{ x: 1, y: 1 }, { x: 2, y: 3 }, { x: 3, y: 2 }, 
 
      { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 5 }]; 
 

 
var xScale = new Plottable.Scales.Linear(); 
 
var yScale = new Plottable.Scales.Linear(); 
 
var xAxis = new Plottable.Axes.Numeric(xScale, "bottom"); 
 
var yAxis = new Plottable.Axes.Numeric(yScale, "left"); 
 

 
var plot = new Plottable.Plots.Bar() 
 
    .addDataset(new Plottable.Dataset(data)) 
 
    .x(function(d) { return d.x; }, xScale) 
 
    .y(function(d) { return d.y; }, yScale) 
 
    .animated(true); 
 
var guideline = new Plottable.Components.GuideLineLayer("horizontal") 
 
     .scale(yScale); 
 
guideline.value(2); 
 

 
var plots = new Plottable.Components.Group([guideline, plot]); 
 
new Plottable.Components.Table([ 
 
      [null, null], 
 
      [yAxis, plots], 
 
      [null, xAxis] 
 
     ]).renderTo("svg#example"); 
 
    
 
window.addEventListener("resize", function() { 
 
    plot.redraw(); 
 
});

<!doctype html> 
 
<html> 
 
<head> 
 

 
</head> 
 

 

 

 

 
<body> 
 
    
 

 
    <svg width="100%" height="100%" id="example"></svg> 
 

 
    <!-- Act on the thing --> 
 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 
    <link href="http://plottablejs.org/assets/css/application.min.css" rel="stylesheet"/> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.js"></script> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/plottable.js/1.12.0/plottable.css" rel="stylesheet"/> 
 

 

 
</body> 
 
</html>

来源

2016-08-22 14:05:38

感谢。有什么方法可以将水平线放在直方图栏后面？ – neversaint

尝试在组中的条形图之前放置准则。 var plots = new Plottable.Components.Group（[guideline，plot]）; –

@Chirag_Kothari：谢谢。我相应地编辑了你的文章。 – neversaint

如何添加水平线在Plottable.js中的y轴上

回答

相关问题