具有独立数据 Javascript 的多个折线图（Chart.js 或 google-可视化）

Question

js 和我有两个数据集：

data1 = [[0,1],[2,3],[5,7]] 和 data2 = [[1,4],[2,6],[5,2],[7 ,1]] 例如。每个数据列表都包含表示要在相同图表上绘制的点的列表。（x 和 y 值）

我想完全像这样绘制： https://www.chartjs.org/samples/latest/charts/line/multi-axis.html

但是如您所见，我的数据列表没有相同的 x 或 y 值，甚至大小也不相同，所以我不能使用常规的：

data: {labels = [1,2,3,4,5],
       data = [7,8,3,1,2],
       data = [9,1,2,3,4]}  //for example

我怎样才能只用 javascript 编码这张图表（请不要用 jQuery）？我没有在互联网上找到任何可能有帮助的东西。任何建议对我都很重要！

Answer 1

您可以使用 scatter chart，它接受 data 作为包含 x 和 y 属性的对象数组。要将其转换为折线图，请在 data 配置对象中定义 showLine: true。

给定您的数据结构，以下代码行生成 Chart.js 所期望的数据结构。

data1.map(o => ({ x: o[0], y: o[1] }))

请查看下面的可运行代码片段。

const data1 = [[0,1],[2,3],[5,7]];
const data2 = [[1,4],[2,6],[5,2],[7,1]]; 

new Chart('line-chart', {
  type: "scatter",
  responsive: true,
  data: {
    datasets: [
      {
        data: data1.map(o => ({ x: o[0], y: o[1] })),
        label: 'Dataset 1',
        showLine: true,
        fill: false,
        borderColor: 'red'
      },
      {
        data: data2.map(o => ({ x: o[0], y: o[1] })),
        label: 'Dataset 2',
        showLine: true,
        fill: false,
        borderColor: 'blue'
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>

具有独立数据 Javascript 的多个折线图（Chart.js 或 google-可视化）

multiple line charts with independent data Javascript (Chart.js or google-vizualisation)

javascript

charts

google-visualization

chart.js