Question

我们潜入Dygraphs并遇到一些奇怪的问题。我们基本上试图复制http://dygraphs.com/gallery/#g/highlighted-series;但是，突出显示仅适用于其中一个图表。此外，当鼠标悬停在其他图表上的数据点时，我们会在Chrome控制台中看到错误：＆＃34;未捕获的TypeError：undefined不是函数。＆＃34;尝试潜入Dygraphs源代码并不富有成效，因为我们只有缩小版本并且没有尝试使用＆＃34;来源＆＃34;版。有没有人遇到类似的问题？如果是这样，你是如何解决的？

为了提供一些额外的背景，我们正在处理大小合适的数据：每行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>

Answer 1

发现了这个问题。

我们的数据是以字符串而不是整数形式返回的。将它们转换为整数解决了这个问题。

已更改

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]);
  }
}

Dygraphs - 突出显示仅在第一个图表上工作

1 个答案: