使用dygraph繪製堆疊圖表

Question

我想使用dygraphs JavaScript庫繪製堆疊圖表，我在下面做了這個。但是我想爲每條小節線添加不同的顏色。兩種顏色像在相同的光色在黑暗和底部欄頂部，這樣的：

請建議我如何可以通過不同的顏色dygraph。
這是我到目前爲止有：

function barChartPlotter(e) { 
 
    var ctx = e.drawingContext; 
 
    var points = e.points; 
 
    var y_bottom = e.dygraph.toDomYCoord(0); // see <a href="http://dygraphs.com/jsdoc/symbols/Dygraph.html#toDomYCoord">jsdoc</a> 
 

 
    // This should really be based on the minimum gap 
 
    var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); 
 
    ctx.fillStyle = e.color; // a lighter shade might be more aesthetically pleasing 
 

 
    // Do the actual plotting. 
 
    for (var i = 0; i < points.length; i++) { 
 
    var p = points[i]; 
 
    var center_x = p.canvasx; // center of the bar 
 

 
    ctx.fillRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
 
    ctx.strokeRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
 
    } 
 
} 
 

 
g = new Dygraph(document.getElementById("graph"), 
 
    "X,Y\n" + 
 
    "1,2\n" + 
 
    "2,4\n" + 
 
    "3,6\n" + 
 
    "4,8\n" + 
 
    "5,10\n" + 
 
    "6,12\n" + 
 
    "7,14\n" + 
 
    "8,16\n", { 
 
    // options go here. See http://dygraphs.com/options.html 
 
    legend: 'always', 
 
    animatedZooms: true, 
 
    plotter: barChartPlotter, 
 
    dateWindow: [0, 9] 
 
    });

/* 
 
Relevant CSS classes include: 
 

 
Labels on the X & Y axes: 
 
.dygraph-axis-label 
 
.dygraph-axis-label-x 
 
.dygraph-axis-label-y 
 
.dygraph-axis-label-y2 
 

 
Chart labels, see http://dygraphs.com/tests/styled-chart-labels.html 
 
.dygraph-title 
 
.dygraph-xlabel 
 
.dygraph-ylabel 
 
.dygraph-y2label 
 

 
The legend, see http://dygraphs.com/tests/series-highlight.html 
 
.dygraph-legend 
 
*/ 
 

 
.dygraph-title { 
 
    color: gray; 
 
}

<script src="//cdnjs.cloudflare.com/ajax/libs/mootools/1.4.5/mootools-core-full-compat.min.js"></script> 
 
<script src="//dygraphs.com/dygraph-dev.js"></script> 
 
<!-- You may set style: "width: ...; height: ..." to size the chart --> 
 
<div id="graph"></div>

View on JSFiddle

Answer 1

下面是用於添加不同顏色代碼：

<div id="graph"></div> 

function barChartPlotter(e) { 
var myColor = ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A", "#42d7f4", "red", "green"]; 
var ctx = e.drawingContext; 
var points = e.points; 
var y_bottom = e.dygraph.toDomYCoord(0); 

// This should really be based on the minimum gap 
var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); 
// a lighter shade might be more aesthetically pleasing 

// Do the actual plotting. 
for (var i = 0; i < points.length; i++) { 
    var p = points[i]; 
    var center_x = p.canvasx; // center of the bar 
    ctx.fillStyle = myColor[i]; 
    ctx.fillRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
    ctx.strokeRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
}} 
g = new Dygraph(document.getElementById("graph"), 
"X,Y\n" + 
"1,2\n" + 
"2,4\n" + 
"3,6\n" + 
"4,8\n" + 
"5,10\n" + 
"6,12\n" + 
"7,14\n" + 
"8,16\n", { 
    // options go here. See http://dygraphs.com/options.html 
    legend: 'always', 
    animatedZooms: true, 
    plotter: barChartPlotter, 
    dateWindow: [0, 9] 
}); 

Answer 2

下面是用於添加拖不同顏色代碼同樣的酒吧：

<div id="graph"></div> 
    function barChartPlotter(e) { 
    var myColor = ["#ECD078", "#D95B43", "#C02942", "#542437", "#53777A", "#42d7f4", "red", "green"]; 
    var myColor1 = ["black", "red", "green", "#ECD078", "#D95B43", "#C02942", "#542437", "#53777A"]; 
    var ctx = e.drawingContext; 
    var points = e.points; 
    var y_bottom = e.dygraph.toDomYCoord(0); 

    // This should really be based on the minimum gap 
    var bar_width = 2/3 * (points[1].canvasx - points[0].canvasx); 
    // a lighter shade might be more aesthetically pleasing 

    // Do the actual plotting. 
    for (var i = 0; i < points.length; i++) { 
     var p = points[i]; 
     var center_x = p.canvasx; // center of the bar 
     ctx.fillStyle = myColor[i]; 
     ctx.fillRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
     ctx.strokeRect(center_x - bar_width/2, p.canvasy, bar_width, y_bottom - p.canvasy); 
    } 
    for (var i = 0; i < points.length; i++) { 
     var p = points[i]; 
     console.log(points[1]); 
     var center_x = p.canvasx; // center of the bar 
     ctx.fillStyle = myColor1[i]; 
     ctx.fillRect(center_x - bar_width/2, p.canvasy, bar_width, (y_bottom - p.canvasy)/2); 
     ctx.strokeRect(center_x - bar_width/2, p.canvasy, bar_width, (y_bottom - p.canvasy)/2); 
    } 
} 
g = new Dygraph(document.getElementById("graph"), 
    "X,Y\n" + 
    "1,2\n" + 
    "2,4\n" + 
    "3,6\n" + 
    "4,8\n" + 
    "5,10\n" + 
    "6,12\n" + 
    "7,14\n" + 
    "8,16\n", { 
     // options go here. See http://dygraphs.com/options.html 
     legend: 'always', 
     animatedZooms: true, 
     plotter: barChartPlotter, 
     dateWindow: [0, 9] 
    });