2017-06-27 36 views
-1

如何製作多列數據的多折線圖?
數據爲例:帶多列數據的酒窩多行

var data75 = [{"d":1,'a1':50,'a2':70}, 
{"d":2,'a1':90,'a2':71}, 
{"d":3,'a1':40,'a2':90}, 
{"d":4,'a1':15,'a2':70}, 
{"d":5,'a1':150,'a2':60}, 
{"d":6,'a1':53,'a2':20}, 
{"d":7,'a1':59,'a2':40}, 
{"d":8,'a1':30,'a2':50}, 
{"d":9,'a1':70,'a2':77}, 
{"d":10,'a1':52,'a2':72}, 
{"d":11,'a1':56,'a2':10}, 
{"d":12,'a1':57,'a2':40},]; 

d =軸線x;
a1和a2 =軸y在2個不同系列中;

Exemple

+2

您可能要首先做一些研究。然後寫一些代碼。嗯,調試,這是一個很好的! – evolutionxbox

+1

查看[google圖表](https://developers.google.com/chart/interactive/docs/gallery/linechart) – mhodges

回答

1
  1. 創建SVG對象

    var svg = dimple.newSvg('#div', 400, 200); 
    
  2. 創建圖表

    var chart = dimple.chart(svg, data75); 
    chart.setBounds(20, 20, 360, 160); 
    
  3. 創建/或/軸分配的圖表

    var x = chart.addCategoryAxis("x", "x"); 
    var y1 = chart.addMeasureAxis("y", "a1"); 
    var y2 = chart.addMeasureAxis("y", "a2"); 
    
  4. 添加系列(軸的對做出一系列)

    myChart.addSeries(null, dimple.plot.line, [x, y1]); 
    myChart.addSeries(null, dimple.plot.line, [x, y2]); 
    
  5. 繪製圖表

    myChart.draw();