无法使用 Chart.js 初始化饼图

Question

我正在复制 Chart.js 中的示例，但我不知道我犯的错误是什么。

这是我的代码（取自示例）：

<canvas id="myChart" width="400" height="400"></canvas>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js" charset="utf-8"></script>
<script type="text/javascript">
    // Get the context of the canvas element we want to select
    var ctx = document.getElementById("myChart").getContext("2d");
    var myNewChart = new Chart(ctx[0]).Pie(data);
    var data = [{
        value: 300,
        color: "#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    }, {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    }, {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }]
</script>

这段代码给我一个错误：

Uncaught TypeError: Cannot read property 'canvas' of undefined

现在，如果我将 myNewChart 变量更改为：

var myNewChart = new Chart(ctx).Pie(data);

没有错误，也没有图表。

我错过了什么？我觉得这很明显...

谢谢

Answer 1

问题出在这里

var myNewChart = new Chart(ctx[0]).Pie(data);

ctx[0] 未定义。

使用这个：

var myNewChart = new Chart(ctx).Pie(data);

Answer 2

您的代码有两个问题。

首先，您在 data 传递给 Chart() 后将属性分配给 data，因此饼图将显示为空，因为您没有传递任何数据。

其次，.getContext('2d') 不是 return 数组，而是单个渲染上下文（或 null）。所以 ctx[0] 未定义。

按如下方式修改您的代码，它应该可以工作。

var ctx = document.getElementById("myChart").getContext("2d");

var data = [{
    value: 300,
    color: "#F7464A",
    highlight: "#FF5A5E",
    label: "Red"
}, {
    value: 50,
    color: "#46BFBD",
    highlight: "#5AD3D1",
    label: "Green"
}, {
    value: 100,
    color: "#FDB45C",
    highlight: "#FFC870",
    label: "Yellow"
}];

var myNewChart = new Chart(ctx).Pie(data);

无法使用 Chart.js 初始化饼图

Cannot initialize a pie chart with Chart.js

javascript

chart.js

pie-chart