用chartjs绘制折线图

时间:2016-05-21 21:42:52

标签: javascript chart.js linechart

我正在尝试使用chartjs绘制折线图,​​但我无法使其正常工作 - 继续“未定义”错误。

这是我的小提琴示例:http://jsfiddle.net/6bjy9nxh/344/

有谁能弄明白我在这里做错了什么?

chartjs:http://www.chartjs.org/docs/#line-chart-example-usage

cdn:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js

HTML

<canvas id="myChart" width="500" height="350"></canvas>

的javascript

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

var data = {
  labels: ["January", "February", "March", "April", "May", "June", "July"],
  datasets: [
    {
          label: "My First dataset",
          fill: false,
          lineTension: 0.1,
          backgroundColor: "rgba(75,192,192,0.4)",
          borderColor: "rgba(75,192,192,1)",
          borderCapStyle: 'butt',
          borderDash: [],
          borderDashOffset: 0.0,
          borderJoinStyle: 'miter',
          pointBorderColor: "rgba(75,192,192,1)",
          pointBackgroundColor: "#fff",
          pointBorderWidth: 1,
          pointHoverRadius: 5,
          pointHoverBackgroundColor: "rgba(75,192,192,1)",
          pointHoverBorderColor: "rgba(220,220,220,1)",
          pointHoverBorderWidth: 2,
          pointRadius: 1,
          pointHitRadius: 10,
          data: [65, 59, 80, 81, 56, 55, 40],
      }
  ]
};

var myLineChart = new Chart(ctx, {
  type: 'line',
  data: data,
});

1 个答案:

答案 0 :(得分:2)

您包含版本1,您需要Chart.js的第2版

https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js

http://jsfiddle.net/x55sgzgf/