我们正在深入研究 Dygraphs 并遇到一些奇怪的问题。我们本质上是在尝试复制 http://dygraphs.com/gallery/#g/highlighted-series ;但是，突出显示仅适用于其中一张图表。此外，当鼠标悬停在其他图表上的数据点上时，我们会在 Chrome 控制台中看到错误:“未捕获的类型错误:未定义不是函数。”尝试深入研究 Dygraphs 源代码并没有取得成果，因为我们只有缩小版本，还没有尝试过“源”版本。有人遇到过类似的问题吗？如果是这样，你是如何解决的？
为了提供一些额外的上下文，我们正在处理大小合适的数据:450 多行，每行大约 500 个数据点。这些图表的目的是查看异常值。
在 Firefox 上，数据甚至不会显示，但我们的绝大多数用户都使用 Chrome，因此我们对此并不十分担心。
欢迎在评论中提供任何其他反馈:)
<html>
<head>
</head>
<body>
<style type='text/css'>
.graphdiv2 .dygraph-legend > span { display: none; }
.graphdiv2 .dygraph-legend > span.highlight { display: inline; }
.graphdiv2 {width:40% ; height: 40%;}
</style>
<p id="debug"></p>
<div id="graphdiv2"></div>
<script type="text/javascript" src="dygraph-combined.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
/*
<link rel="stylesheet" type="text/css" href="graphs.css">
*/
$("#debug").text("Loading...");
var makeGraph = function(col_name) {
var div = document.createElement('div');
div.className = "graphdiv2 "+col_name;
div.style.display = 'inline-block';
div.style.margin = '4px';
gs = [];
var blockRedraw = false;
$("#graphdiv2").append(div);
$.ajax({
dataType: "json",
url: "data.php",
data:{ col_name: col_name, realm_id: 1, hours: 0.5 }
}).done(function(data) {
$("#debug").text("Data Loaded. Setting up graph");
/*var labels = { labels: data["labels"] };*/
var graph_data = data["data_junk"]
;
for ( var i = 0; i < graph_data.length; i++) {
graph_data[i][0] = new Date(graph_data[i][0]);
}
gs.push(
new Dygraph(
div,
graph_data, // path to CSV file
{
labels: data["labels"],
title: col_name,
ylabel: col_name,
xlabel: 'date/time',
showLabelsOnHighlight: true,
labelsSeparateLines: false,
showRoller: false,
/*legend: 'always',*/
highlightCircleSize: 2,
strokeWidth: 1,
strokeBorderWidth: 1,
highlightSeriesOpts: {
strokeWidth: 3,
strokeBorderWidth: 1,
highlightCircleSize: 5,
},
drawCallback: function(me, initial) {
if (blockRedraw || initial) return;
blockRedraw = true;
var range = me.xAxisRange();
for (var j = 0; j < 4; j++) {
if (gs[j] == me) continue;
gs[j].updateOptions( {
dateWindow: range
} );
}
blockRedraw = false;
}
} // options
)
);
});
};
makeGraph("data1");
makeGraph("data2");
makeGraph("data3");
makeGraph("data4");
</script>
</body>
</html>
最佳答案
发现问题。
我们的数据以字符串而不是整数的形式返回。将它们转换为整数解决了问题。
已更改
for ( var i = 0; i < graph_data.length; i++) {
graph_data[i][0] = new Date(graph_data[i][0]);
}
至
for ( var i = 0; i < graph_data.length; i++) {
graph_data[i][0] = new Date(graph_data[i][0]);
for ( var j = 1; j < graph_data[i].length; j++) {
graph_data[i][j] = parseInt(graph_data[i][j]);
}
}
关于javascript - Dygraphs - 突出显示仅在第一个图表上工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24175014/