Question

我想制作一个简单的图形（只是两个坐标之间的一条线-（2,5）和（5,10）。

HtML

<canvas id="line" width="600" height="400"></canvas>

JavaScript

var lineData = {
  type: "line",
  data: {
  datasets: [{
        label: "Test",
        data: [{
            x: 2,
            y: 5
        }, {
            x: 5,
            y: 10
        }],
    }]
    }
  }
var line = document.getElementById('line').getContext('2d');  
new Chart(line).Line(lineData);

不幸的是，这什么都没显示。

Answer 1

请参考下面的代码段以正确显示图表，或者可以访问小提琴-> https://jsfiddle.net/pgv2jon3/1/

var lineData = {
  type: "line",
  data: {
  datasets: [{
        label: "Test",
        data: [{
            x: 2,
            y: 5
        }, {
            x: 5,
            y: 10
        }],
    }]
    }
  }
var ctx = document.getElementById('line').getContext('2d');  
new Chart(ctx, lineData);

仅有两个坐标的Chart.js图

1 个答案: