Question

我使用了很棒的dygraphs库来绘制数据。值范围从0到100.对于0-50之间的数据可以有1种颜色，对于51-80可以有其他颜色，对于81-100可以有另一种颜色。

重点是更好地展示数据。 0-50是正常（绿色），51-80是警告（黄色），81-100是警报（红色）。

我知道dygraphs突出显示了区域（http://dygraphs.com/gallery/#g/highlighted-region），但这不是它。

Answer 1

您可以使用drawPointCallback功能执行此操作。

new Dygraph(div, data, {
  drawPointCallback: function(g, seriesName, canvasContext, cx, cy, seriesColor, pointSize, row) {
    var col = g.indexFromSetName(seriesName);
    var val = g.getValue(row, col);
    var color = '';
    if (val >= 0 && val <= 50) {
      color = 'green';
    } else if (val > 50 && val <= 80) {
      color = 'yellow';
    } else if (val > 80) {
      color = 'red';
    }
    if (color) {
      canvasContext.beginPath();
      canvasContext.fillStyle = color;
      canvasContext.strokeStyle = seriesColor;
      canvasContext.arc(cx, cy, pointSize, 0, 2 * Math.PI, false);
      canvasContext.fill();
      canvasContext.stroke();
    }
  }, 
  drawPoints: true,
  pointSize: 5,
  highlightCircleSize: 8
});

请参阅fiddle。

每个轴的多种颜色基于值

1 个答案: