带有多列数据的凹痕多行

Hag*_*ood 0 javascript charts dimple.js

如何制作具有多列数据的多折线图?
数据示例:

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},];
Run Code Online (Sandbox Code Playgroud)

d = x 轴;
a1 和 a2 = 2 个不同系列中的 y 轴;

例子

ash*_*91d 5

  1. 创建 SVG 对象

    var svg = dimple.newSvg('#div', 400, 200);
    
    Run Code Online (Sandbox Code Playgroud)
  2. 创建图表

    var chart = dimple.chart(svg, data75);
    chart.setBounds(20, 20, 360, 160);
    
    Run Code Online (Sandbox Code Playgroud)
  3. 创建/或/为图表分配轴

    var x = chart.addCategoryAxis("x", "x");
    var y1 = chart.addMeasureAxis("y", "a1");
    var y2 = chart.addMeasureAxis("y", "a2");
    
    Run Code Online (Sandbox Code Playgroud)
  4. 添加系列(一对轴组成系列)

    myChart.addSeries(null, dimple.plot.line, [x, y1]);
    myChart.addSeries(null, dimple.plot.line, [x, y2]);
    
    Run Code Online (Sandbox Code Playgroud)
  5. 绘制图表

    myChart.draw();
    
    Run Code Online (Sandbox Code Playgroud)