在dygraphs中表示枚举数据

时间:2017-06-15 08:51:50

标签: javascript enums dygraphs

我需要用枚举数据表示图形(主要是信号值是随时间变化的字符串)。我正在使用dygraphs,我在解决方案中使用注释和underlayCallback来考虑填充画布的颜色,具体取决于信号的值。

what I want to get

我不确定这种解决方案效率是否非常低,但现在我能想到的只是。

解决方案类似于我附加的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>

1 个答案:

答案 0 :(得分:0)

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

Graphs with enum data