Chart.js - 用X,Y坐标绘制折线图

Sam*_*ver 14 javascript chart.js

我正在尝试用x,y坐标创建一个简单的折线图,但我得到一个空白页面.

我不想设置标签,但要从x,y坐标自动生成标签.我认为chartjs已经实现了,但我的语法错了.

var x = new Chart(document.getElementById("myChart1"), {
    type: 'line',
    data: {
        datasets: [{
            label: "Test",
            data: [{
                x: 0,
                y: 5
            }, {
                x: 5,
                y: 10
            }, {
                x: 8,
                y: 5
            }, {
                x: 15,
                y: 0
            }],
        }]
    },
    options: {
        responsive: true,
    }
});
Run Code Online (Sandbox Code Playgroud)

知道如何修复上面的代码吗?

ɢʀᴜ*_*ᴜɴᴛ 13

我相信,你在寻找的是散点图,而不是线.

var x = new Chart(document.getElementById("myChart1"), {
   type: 'scatter',
   data: {
      datasets: [{
         label: "Test",
         data: [{
            x: 0,
            y: 5
         }, {
            x: 5,
            y: 10
         }, {
            x: 8,
            y: 5
         }, {
            x: 15,
            y: 0
         }],
      }]
   },
   options: {
      responsive: true
   }
});
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>
Run Code Online (Sandbox Code Playgroud)

请参阅此处,以了解有关散点图的更多信息.

  • @EduardoWada说的是真的.但是,您可以使用以下设置启用行:showLine:true用于数据集. (8认同)
  • 版本2.7.1没有连接散点图上的点,这是有道理的,因为op尝试做的是折线图,而不是散点图.https://jsfiddle.net/sdz2ot42/ (4认同)