Jak dodać linię poziomą nad osią Y w Plottable.js

Mam następujący kod uruchamiania w kodzie JavaScript Plottable.js.Jak dodać linię poziomą nad osią Y w Plottable.js

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>

Jak stwierdzono w obrazek poniżej, w jaki sposób można zmodyfikować mojego kodu Javascript, dzięki czemu może ona zawierać linię poziomą w y=2?

Źródło

2016-08-02 neversaint

Można użyć 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>

Źródło

2016-08-22 14:05:38

Dzięki. Czy istnieje sposób, w jaki mogę umieścić poziomą linię za paskiem histogramu? – neversaint

Spróbuj umieścić wytyczną przed wykresem słupkowym w grupie. var plots = new Plottable.Components.Group ([wytyczna, działka]); –

@Chirag_Kothari: Dzięki. Odpowiednio zredagowałem twój post. – neversaint

Jak dodać linię poziomą nad osią Y w Plottable.js

Odpowiedz

Powiązane problemy