Question

我在以下示例中使用dygraph来显示3系列数据＆＃39; Y1＆＃39;，＆＃39; Y2＆＃39;和＆＃39; Y3＆＃39;。我的计划是展示Y1＆＃39;作为一个bartChart和＆＃39; Y2＆＃39; ＆安培; ＆＃39; Y3＆＃39;作为一条填充线。对于＆＃39; Y1＆＃39;我使用了自定义绘图仪功能 barChartPlotter（）。对于＆＃39; Y2＆＃39;和＆＃39; Y3＆＃39;我只是使用默认的 fillGraph 选项。我的代码在这里：

＆＃13;

function darkenColor(colorStr) {
    // Defined in dygraph-utils.js
    var color = Dygraph.toRGB_(colorStr);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',0.5)';
}
function barChartPlotter(e) {
     var ctx = e.drawingContext;
        var points = e.points;
        var y_bottom = e.dygraph.toDomYCoord(0);

        ctx.fillStyle = darkenColor(e.color);

        // Find the minimum separation between x-values.
        // This determines the bar width.
        var min_sep = Infinity;
        for (var i = 1; i < points.length; i++) {
          var sep = points[i].canvasx - points[i - 1].canvasx;
          if (sep < min_sep) min_sep = sep;
        }
        var bar_width = Math.floor(2.0 / 3 * min_sep);

        // Do the actual plotting.
        for (var i = 0; i < points.length; i++) {
          var p = points[i];
          var center_x = p.canvasx;

          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,Y1,Y2,Y3\n" +
                 "0,25,0,30\n" +
                 "1,20,10,27\n" +
                 "2,17,17,30\n" +
                 "3,16,23,28\n" +
                 "4,14,27,30\n" +
                 "5,13,30,29\n" +
                 "6,12,32,30\n" +
                 "7,11,33,30\n",
                 {
    				"Y1": {
                         plotter: barChartPlotter
                     },
    				"Y2": {
                    	fillGraph: true
                    },
                    "Y3": {
                    	fillGraph: true
                    }, 
                     title: 'Test'
                 });

＆＃13;

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<div id="graph"></div>

＆＃13;

正如您在代码段中看到的那样，fillGraph选项不适用于＆＃39; Y2＆＃39;和＆＃39; Y3＆＃39;。但是我注意到当我改变意甲的顺序时（使用自定义绘图仪而不是＆＃39; Y1＆＃39;），它起作用。请参阅以下代码段：

＆＃13;

function darkenColor(colorStr) {
    // Defined in dygraph-utils.js
    var color = Dygraph.toRGB_(colorStr);
    color.r = Math.floor((255 + color.r) / 2);
    color.g = Math.floor((255 + color.g) / 2);
    color.b = Math.floor((255 + color.b) / 2);
    return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',0.5)';
}
function barChartPlotter(e) {
     var ctx = e.drawingContext;
        var points = e.points;
        var y_bottom = e.dygraph.toDomYCoord(0);

        ctx.fillStyle = darkenColor(e.color);

        // Find the minimum separation between x-values.
        // This determines the bar width.
        var min_sep = Infinity;
        for (var i = 1; i < points.length; i++) {
          var sep = points[i].canvasx - points[i - 1].canvasx;
          if (sep < min_sep) min_sep = sep;
        }
        var bar_width = Math.floor(2.0 / 3 * min_sep);

        // Do the actual plotting.
        for (var i = 0; i < points.length; i++) {
          var p = points[i];
          var center_x = p.canvasx;

          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,Y1,Y2,Y3\n" +
                "0,25,0,30\n" +
                "1,20,10,27\n" +
                "2,17,17,30\n" +
                "3,16,23,28\n" +
                "4,14,27,30\n" +
                "5,13,30,29\n" +
                "6,12,32,30\n" +
                "7,11,33,30\n",
                {
    "Y1": {
        fillGraph: true
    },
    "Y2": {
        plotter: barChartPlotter
    },
    "Y3": {
        fillGraph: true
    },	
    title: 'Test'
});

＆＃13;

<script src="http://dygraphs.com/dygraph-dev.js"></script>
<div id="graph"></div>

＆＃13;

所以我想我的问题是：为什么 fillGraph 选项不适用于＆＃39; Y2＆＃39;和<＆＃39; Y3＆＃39;，当第一个系列＆＃39; Y1＆＃39;是使用自定义绘图仪功能？但是当不第一个系列使用自定义绘图仪时，它可以正常工作。

提前谢谢。

dygraphs：使用fillGraph和自定义绘图仪（barChart）

0 个答案: