Chart.js - 用X，Y坐标绘制折线图 [英] Chart.js - Plot line graph with X , Y coordinates

问题描述

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

I'm trying to create a simple line graph with x,y coordinates but i'm getting a blank page .

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

I don't want to set labels , but have them generated automatically from the x,y coordinates. I think chartjs already implements that but my syntax is wrong.

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,
    }
});

知道如何解决上面的代码吗？

Any idea how to fix the code above ?

推荐答案

我相信，您所寻找的是分散图表，而不是行。

I believe, what you are looking for, is a scatter graph, not line.

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
   }
});

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

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

Refer here, to learn more about scatter chart.

这篇关于Chart.js - 用X，Y坐标绘制折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！