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

问题描述

我一直在尝试使用Chart.js 2.2.1版来显示来自另一个站点的教程中的简单图表。.
即使使用最基本的数据也不会显示任何内容。如果我使用压缩版本，那么CDN的版本不可用，什么也不会压缩。

I've been trying to get Chart.js version 2.2.1 to show a simple chart using the tutorial from another site..Even with the most basic data nothing will show. If I use the minified version, the version off CDN nada,nothing, zip.

在Brackets中，版本1.0.2可以正常工作，但是版本2.2.1可以解决很多问题的jshint错误。

In Brackets version 1.0.2 works fine, but version 2.2.1 comes up with lots of jshint errors.

我什至在JSFiddle上试用了该版本，但最新版本仍然没有。

I even tried it out on JSFiddle and still nothing with the lastest verson.

javascript新手，我想知道是否有明显的遗漏，否则我将继续使用旧版本。

Being new to javascript I am wondering if there is something obvious that I am missing, otherwise I will continue to just use an older version.

这是工作代码。我只添加了Chart.js文件的开头。

Here is the working code. I have only added the beginning of the Chart.js file.

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

如果我使用Chart.js的2.2.1版本，则不会发生任何事情。

If I use version 2.2.1 of Chart.js nothing happens.

/*!
 * 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
 */

下面是这两个版本的小提琴

Below are fiddles to the two versions

正在使用

不起作用

推荐答案

从1.0开始，语法已更改。您在2.2.1中的JavaScript应该是：

The syntax has changed since 1.0. Your javascript in 2.2.1 should be:

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

这篇关于Chart.js版本2.2.1不会显示图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！