javascript - 在dygraphs中表示枚举数据

Question

我需要用枚举数据表示图形(主要表明哪些值是随时间变化的字符串)。我正在使用 dygraphs，并且我考虑过使用注释和 underlayCallback 来根据信号值填充 Canvas 的颜色的解决方案。

我不确定这个解决方案是否非常低效，但现在这就是我能想到的。

解决方案类似于我附加的 jsfiddle，但数据插入的所有过程都是自动完成的。我将采用这种解决方法，我想也许其他人也有同样的需求。

如果您熟悉dygraph，并且有任何建议、改进或意见，请告诉我。

http://jsfiddle.net/Lucidio/wwb6qdan/

var highlight1_start = 0;
var highlight1_end = 2;
var highlight2_start = 2;
var highlight2_end = 6;
var highlight3_start = 6;
var highlight3_end = 8;

var color1 = "rgba(255, 255, 102, 1.0)";
var color2 = "rgba(0, 255, 255, 1.0)";

g = new Dygraph(document.getElementById("graph"),
// For possible data formats, see http://dygraphs.com/data.html
// The x-values could also be dates, e.g. "2012/03/15"
"X,Y\n" +
    "0,1\n" +
    "1,1\n" +
    "2,1\n" +
    "3,1\n" +
    "4,1\n" +
    "5,1\n" +
    "6,1\n" +
    "7,1\n" +
    "8,1\n", {
    // options go here. See http://dygraphs.com/options.html
    legend: 'none',
    valueRange : [0,1.05],
    animatedZooms: true,
    drawGrid : false,
    underlayCallback: function (canvas, area, g) {
        var bottomy = g.toDomYCoord(0);
        var topy = g.toDomYCoord(1)
        
        var bottomx = g.toDomXCoord(highlight1_start);
        var topx = g.toDomXCoord(highlight1_end);
        canvas.fillStyle = color1;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
        
        var bottomx = g.toDomXCoord(highlight2_start);
        var topx = g.toDomXCoord(highlight2_end);
        canvas.fillStyle = color2;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
        
        var bottomx = g.toDomXCoord(highlight3_start);
        var topx = g.toDomXCoord(highlight3_end);
        canvas.fillStyle = color1;
        canvas.fillRect(topx, topy , bottomx - topx , bottomy-topy);
              
    },
    zoomCallback: function() {
      g.updateOptions({valueRange: [0, 1.05]});
    }

});

g.ready(function() {
    g.setAnnotations([
    {
      series: "Y",
      x: "1",
      shortText: "ENUM1",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    },
    {
      series: "Y",
      x: "4",
      shortText: "ENUM2",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    },
    {
      series: "Y",
      x: "7",
      shortText: "ENUM1",
      width: 60,
      height: 15,
      cssClass: 'annotation',
      attachAtBottom : true,
      tickHeight: 0
    }
    ]);
  });

.dygraph-title {
    color: gray;
}

#graph{
  height: 65px;
  margin-top : 30px;
  margin-right : 20px;
}

.annotation{
  text-align: center;
}

<!-- You may set style: "width: ...; height: ..." to size the chart -->
<div id="graph"></div>

Answer 1

我一直在研究这个问题，并得到了下面显示的结果。使用此功能可以构建图表，其中信息是字符串，其值随时间变化。我将完成该功能，并按照我完成的方式上传。