Question

我创建了一个jsfiddle，可以让你看到我的问题。该问题仅发生在Chrome中。最新版本的Safari，IE，FF完美运行。这是一个已知的问题？有修复吗？没有Dimple的D3工作正常。任何关于解决方案的想法或知识都会很棒。

http://jsfiddle.net/ernieb0y/0ovteqr8/1/

`var data1 = [{＆＃34;距离＆＃34;：＆＃34; 31＆＃34;，＆＃34;方差＆＃34;：0.11}， {＆＃34;距离＆＃34;：＆＃34; 92＆＃34;＆＃34;差额＆＃34;：0.38}， {＆＃34;距离＆＃34;：＆＃34; 153＆＃34;＆＃34;差额＆＃34;：0.84}， {＆＃34;距离＆＃34;：＆＃34; 214＆＃34;＆＃34;差额＆＃34;：1.55}， {＆＃34;距离＆＃34;：＆＃34; 276＆＃34;＆＃34;差额＆＃34;：2.34}， {＆＃34;距离＆＃34;：＆＃34; 337＆＃34;＆＃34;差额＆＃34;：3.04}， {＆＃34;距离＆＃34;：＆＃34; 398＆＃34;＆＃34;差额＆＃34;：3.86}， {＆＃34;距离＆＃34;：＆＃34; 459＆＃34;＆＃34;差额＆＃34;：4.6}， {＆＃34;距离＆＃34;：＆＃34; 521＆＃34;＆＃34;差额＆＃34;：5.16}， {＆＃34;距离＆＃34;：＆＃34; 582＆＃34;＆＃34;差额＆＃34;：6.09}， ] var data2 = [{＆＃34;距离＆＃34;：＆＃34; 31＆＃34;，＆＃34;方差＆＃34;：0.11}， {＆＃34;距离＆＃34;：＆＃34; 92＆＃34;＆＃34;差额＆＃34;：0.38}， {＆＃34;距离＆＃34;：＆＃34; 153＆＃34;＆＃34;差额＆＃34;：0.84}， {＆＃34;距离＆＃34;：＆＃34; 214＆＃34;＆＃34;差额＆＃34;：1.55}， {＆＃34;距离＆＃34;：＆＃34; 276＆＃34;＆＃34;差额＆＃34;：2.34}， {＆＃34;距离＆＃34;：＆＃34; 337＆＃34;＆＃34;差额＆＃34;：3.04}， {＆＃34;距离＆＃34;：＆＃34; 398＆＃34;＆＃34;差额＆＃34;：3.86}， {＆＃34;距离＆＃34;：＆＃34; 459＆＃34;＆＃34;差额＆＃34;：4.6}， {＆＃34;距离＆＃34;：＆＃34; 521＆＃34;＆＃34;差额＆＃34;：5.16}， {＆＃34;距离＆＃34;：＆＃34; 582＆＃34;＆＃34;差额＆＃34;：6.09}， {＆＃34;距离＆＃34;：＆＃34; 643＆＃34;＆＃34;差额＆＃34;：6.89}， ]

var svg = dimple.newSvg("#chartContainer", 600,600);

  var myChart = new dimple.chart(svg);
  myChart.setBounds(90, 35, 480, 400)
  xAxis = myChart.addMeasureAxis("x", "distance");
  yAxis = myChart.addMeasureAxis("y", "variance");
  xAxis.showGridlines = true;
  yAxis.ticks = 5 
  xAxis.ticks = 5 
  s1 = myChart.addSeries(["distance","perf_1"], dimple.plot.line, [xAxis, yAxis]);
  s1.data = data1
  s1.lineMarkers = true;
  s2 = myChart.addSeries(["distance","perf_2"], dimple.plot.line, [xAxis, yAxis]);
  s2.data = data2
  myChart.addLegend(90, 480, 330, 20, "left");
  myChart.draw();`

Answer 1

问题不在于数据，而在于使用addSeries调用。我在这里调整了它们：

请参阅小提琴：http://jsfiddle.net/jose_jimenez/nvrekzd5/1/

当您传递数组['distance'，'perf1']时，它希望每个都是一列，它具有创建图例的副作用。

如果你想要两个具有相似轴的系列，你可以在你的数据集中添加一个列（字段名称perf，值'perf1'，'perf2'），这样就可以得到你想要的东西。

http://jsfiddle.net/jose_jimenez/nvrekzd5/2/

（为了便于说明，调整为略有不同的值）

var data1 = [{"perf": 'perf1', "distance":"31","variance":0.11},
     {"perf": 'perf1', "distance":"92","variance":0.38},
     {"perf": 'perf1', "distance":"153","variance":0.84},
     {"perf": 'perf2', "distance":"31","variance":0.12},
         {"perf": 'perf2', "distance":"94","variance":0.38},
         {"perf": 'perf2', "distance":"150","variance":0.87},
         ]

var svg = dimple.newSvg("#chartContainer", 600,600);

  var myChart = new dimple.chart(svg);
  myChart.setBounds(90, 35, 480, 400)
  xAxis = myChart.addMeasureAxis("x", "distance");
  yAxis = myChart.addMeasureAxis("y", "variance");
  xAxis.showGridlines = true;
  yAxis.ticks = 5 
  xAxis.ticks = 5 
  s1 = myChart.addSeries(["distance", 'perf'], dimple.plot.line, [xAxis, yAxis]);
  s1.data = data1
  s1.lineMarkers = true;
  myChart.addLegend(90, 480, 330, 20, "left");
  myChart.draw();

当超过10个数据对时，Chrome中的凹陷折线图无法正确绘制

1 个答案: