javascript - Dygraphs-高亮显示仅在第一个图形上工作

我们正在研究Dygraphs，并遇到一些奇怪的问题。我们实质上是在尝试复制http://dygraphs.com/gallery/#g/highlighted-series；但是，突出显示仅适用于其中一张图。此外，将鼠标悬停在其他图形上的数据点上时，我们在Chrome的控制台中看到一个错误：“未捕获的TypeError：未定义不是函数”。尝试深入了解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/

DyGraphs

javascript - Dygraphs-高亮显示仅在第一个图形上工作