9

NVD3 ライブラリを使用して、Rails コントローラーで生成されたデータに基づいて単純な折れ線グラフを作成しています。Railsでデータを生成するために使用しているコードは次のとおりです。

task.task_values.each do |u|
 array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i })
end
data_label = task.name + " ("+ task_unit +")"
taskValuesList = [{:key => data_label, :values => array}]
data = {:type => "line", :data => taskValuesList}

次に、私の見解では、次の JS コードがあります。

nv.addGraph(function() {
var chart = nv.models.lineChart()
  .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

chart.xAxis
   .showMaxMin(false)
       .tickFormat(function(d){return d3.time.format("%m/%d/%y")(new Date(d));});
chart.yAxis
   .tickFormat(d3.format(',d'));

d3.select('#chart<%= i %> svg')
  .datum(data.data)
  .transition().duration(500)
  .call(chart);

nv.utils.windowResize(chart.update);
  return chart;
});

グラフは適切にレンダリングされますが、ツールチップを表示するためにデータ ポイントをマウスオーバーしようとすると、「Uncaught TypeError: Cannot read property 'x' of undefined」というエラーが表示されます。

4

3 に答える 3

4

が表示されている場合Uncaught TypeError: Cannot read property 'x' of undefinedは、データ シリーズに含まれるポイントの数が異なる可能性があります。

これが 1 つのシリーズのみで発生するかどうかを確認します。

于 2013-10-26T06:08:26.810 に答える
-2

データが JSON 形式であることを確認してください。

サンプルの JSON データは次のようになります。

data = [{
    key : "Line 1",
    color : "#51A351",
    values : [{
        x : 1373403179000,
        y : 40
    }, {
        x : 1373403469000,
        y : 30
    }, {
        x : 1373403567000,
        y : 20
    }]
}, {
    key : "Line 2",
    color : "#BD362F",
    values : [{
        x : 1373403179000,
        y : 60
    }, {
        x : 1373403469000,
        y : 50
    }, {
        x : 1373403567000,
        y : 70
    }]
}]

UPDATE :これはNVD3折れ線グラフ の実用的なフィドルです

于 2013-07-13T02:45:44.983 に答える