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

标签 javascript chart.js

我一直在尝试获取 Chart.js 版本 2.2.1,以使用另一个站点的教程来显示一个简单的图表。 即使有最基本的数据也不会显示任何内容。如果我使用缩小版本,则该版本是 CDN nada 的版本,什么都没有,zip。

In Brackets 版本 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);

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

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

下面是两个版本的 fiddle

工作中Chart.js version 1.0.2 fiddle

不工作 Chart.js version 2.2.1 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
});

FIDDLE

CHARTJS DOCUMENTATION

关于javascript - Chart.js 版本 2.2.1 不会显示图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38941528/

相关文章:

javascript - apply() 没有按预期工作

php - 根据两个下拉选择值获取索引页面中的图像和其他详细信息?

reactjs - react 图表js跳过零值月份

javascript - Chart.js,您可以覆盖图例标签框颜色吗?

javascript - p5.j​​s 类(类 "example"没有改变我的 this.x 值)

javascript - 在 React 项目中导入捕鼠器 - 无法读取未定义的属性 'bind'

javascript - getElementById.value 不起作用错误 : form1. html :10 Uncaught ReferenceError: f1 is not defined at HTMLButtonElement. onclick (form1.html:10)

javascript - 如何修复带有长标签的 Chart.js 中的条形图

javascript - 如何添加链接到 chart.js( donut chart )?

chart.js - 如何隐藏 Chart.js 饼图中的部分