1
我需要用枚舉數據表示圖形(主要指信號的值是隨時間變化的字符串)。我正在使用dygraphs,我在解決方案中使用註釋和underlayCallback來根據信號的值填充畫布的顏色。在dygraph中表示枚舉數據
我不知道,如果這個解決方案是非常低效的,但現在這是所有我能想到的。
該解決方案將類似於我附加的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>