js图表非均匀x值

Question

是否有一个JS Charting lib支持多个curces，步骤不一致？ 考虑这样的数据：

Curve 1 (x/y pairs) RED in Sample:
[1, 10] [10, 20] [20,20]
Curve 2 Green in Sample:
[1, 2] [5, 6] [10,10] [11,12] [15,15] [20,20]

这将产生2条曲线，x RANGE从1..20开始。第一个只有3个数据点，应该用一条线连接起来。第二个在相同的x值范围内有6个点。

哪个JS Charting库可以处理它？

Answer 1

最可能的是，任何图表库都可以处理， 只需要以图表接受的格式加载数据

这里，谷歌图表用于绘制图表

google图表有join表

的方法

所以，只需创建两个数据表，每个x范围一个

生成的联接表将使用null

填写缺失值

因此，interpolateNulls需要选项，因此行中没有中断

请参阅以下工作代码段...

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var x0 = [
    [1, 10], [10, 20], [20,20]
  ];
  var x1 = [
    [1, 2], [5, 6], [10,10], [11,12], [15,15], [20,20]
  ];

  var data0 = google.visualization.arrayToDataTable(x0, true);
  var data1 = google.visualization.arrayToDataTable(x1, true);

  var joinData = google.visualization.data.join(
    data0, data1, 'full', [[0, 0]], [1], [1]
  );

  var options = {
    height: 400,
    interpolateNulls: true,
    legend: {
      position: 'none'
    },
    vAxis: {
      viewWindow: {
        max: 30
      }
    },
    hAxis: {
      viewWindow: {
        max: 30
      }
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.LineChart(container);
  chart.draw(joinData, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>