chart. js 2.2.1版本不会显示图表

Chart.js version 2.2.1 wont show chart

本文关键字：显示图 版本 js chart      更新时间：2023-09-26

我一直试图得到chart .js版本2.2.1显示一个简单的图表使用教程从另一个网站。即使是最基本的数据也无法显示。如果我使用的是缩小版，也就是CDN上的那个版本。

在括号中1.0.2版本工作得很好，但2.2.1版本出现了许多jshint错误。

我甚至在JSFiddle上尝试了一下，仍然没有最新版本。

作为javascript的新手，我想知道是否有一些明显的东西我错过了，否则我将继续使用旧版本。

下面是工作代码。我只添加了Chart.js文件的开头部分。

<canvas width="300px" height="300px" id="my-chart"></canvas>
* Chart.js
 * http://chartjs.org/
 * Version: 1.0.2
 *
 * Copyright 2015 Nick Downie
 * Released under the MIT license
 * https://github.com/nnnick/Chart.js/blob/master/LICENSE.md
 */
var pieData = [
   {
      value: 25,
      label: 'Java',
      color: '#811BD6'
   },
   {
      value: 10,
      label: 'Scala',
      color: '#9CBABA'
   },
   {
      value: 30,
      label: 'PHP',
      color: '#D18177'
   },
   {
      value : 35,
      label: 'HTML',
      color: '#6AE128'
   }
];
var context = document.getElementById('my-chart').getContext('2d');
var skillsChart = new Chart(context).Pie(pieData);

如果我使用2.2.1版本的Chart.js，什么都不会发生。

/*!
 * Chart.js
 * http://chartjs.org/
 * Version: 2.2.1
 *
 * Copyright 2016 Nick Downie
 * Released under the MIT license
 * https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
 */

下面是两个版本

的注释

Working Chart.js version 1.0.2 fiddle

语法自1.0以来发生了变化。2.2.1版本的javascript应该是:

var data = {
    labels: [
        "Java",
        "Scala",
        "PHP",
        "HTML"
    ],
    datasets: [
        {
            data: [25, 10, 30, 35],
            backgroundColor: [
                "#811BD6",
                "#9CBABA",
                "#D18177",
                "#6AE128"
            ]
        }]
};
var ctx = document.getElementById("my-chart");
var myPieChart = new Chart(ctx,{
    type: 'pie',
    data: data
});

小提琴

CHARTJS文档

相关文章：