Chart.js-使用多个标签显示多个折线图

Question

我需要使用Chart.js用2条线绘制一个图表。
每行都有不同的标签集。
即图1：

1 -> 2  
2 -> 4   
3 -> 8  
4 -> 16

图2：

1 -> 3  
3 -> 4  
4 -> 6  
6 -> 9

下面的示例显然不起作用，因为它使用了chart1中的标签。但是可以通过Chart.js来实现吗？

    var config = {
        type: 'line',
        data: {
            labels: [1,2,3,4,5],
            datasets: [{
                label: 'Chart 1',
                data: [2,4,8,16],
            }, {
                label: 'Chart 2',
                data: [3,4,6,9],
            }]
        },

其他制图库提供（标签/数据）设置为参数，因此我可以简单地将Tupel作为参数
（即[[1-> 2]，（2-> 4），（3-> 8）...]
对于每个图表，lib将匹配所有内容。

谢谢

编辑：根据要求提供详细的样本：

1 -> 2  
2 -> 4   
3 -> 8  
4 -> 16

1 -> 3  
3 -> 4  
4 -> 6  
6 -> 9

Answer 1

使用scatter类型表，showLine: true而不要使用line带有标签的类型：

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'scatter',
  data: {
    datasets: [
    	{
        label: 'Chart 1',
        data: [{x: 1, y: 2}, {x: 2, y: 4}, {x: 3, y: 8},{x: 4, y: 16}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(0, 200, 0, 1)'
    	},
      {
        label: 'Chart 2',
        data: [{x: 1, y: 3}, {x: 3, y: 4}, {x: 4, y: 6}, {x: 6, y: 9}],
        showLine: true,
        fill: false,
        borderColor: 'rgba(200, 0, 0, 1)'
    	}
    ]
  },
  options: {
    tooltips: {
      mode: 'index',
      intersect: false,
    },
    hover: {
      mode: 'nearest',
      intersect: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="myChart"></canvas>