使用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]
    });

使用dygraph绘制堆积图

Draw stacked chart using dygraph

javascript

dygraphs