在dygraph中表示枚举数据

我需要用枚举数据表示图形（主要指信号的值是随时间变化的字符串）。我正在使用dygraphs，我在解决方案中使用注释和underlayCallback来根据信号的值填充画布的颜色。在dygraph中表示枚举数据

我不知道，如果这个解决方案是非常低效的，但现在这是所有我能想到的。

该解决方案将类似于我附加的jsfiddle，但所有的数据插入过程自动完成。我将在这个解决方案中工作，我想也许另一个人有相同的需求。

如果您熟悉dygraph并且您有任何建议，改进或评论，请让我知道。

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>

来源

2017-06-15 Lucidio Vacas

我已经在这个问题上一直和我有结果我下面展示。使用此功能可以构建图表，其中信息是随时间变化的字符串。我将完成功能，我将按照我已经完成的方式上传。

来源

2017-06-23 10:15:38

在dygraph中表示枚举数据

回答

相关问题