在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中表示枚舉數據

回答

相關問題