用chart.js绘制饼图

I'm using chart.js from http://www.chartjs.org/.

我正在使用http://www.chartjs.org/中的chart.js。

I want to draw a pie chart, but nothing is displaying. I managed to draw line chart, so the Javascript is loaded.

我想画一个饼图，但没有显示。我设法绘制折线图，因此加载了Javascript。

HTML

<!-- Chart -->
<script type="text/javascript" src="_javascripts/chart/Chart.min.js"></script>
<!-- //Chart-->


    <canvas id="browsersChart" width="400" height="100"></canvas>
    <script>
    var ctx = document.getElementById("browsersChart");
    var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            datasets: [{
                label: 'Browsers',
                data: [14, 2, 2, 2, 1],
                backgroundColor: [
                    window.chartColors.red,
                    window.chartColors.orange,
                    window.chartColors.yellow,
                    window.chartColors.green,
                    window.chartColors.blue,
                ],
            }],
            labels: [
                "Chrome"
                "Firefox"
                ""
                "MSIE"
                "Mobile Safari"
                ]
            },
            options: {
                    responsive: true
            }
        };
    </script>

1 个解决方案

#1

You have some typos in your code.

你的代码中有一些拼写错误。

In the labels section, you need a comma after each label:

在标签部分中，每个标签后都需要逗号：

labels: [
    "Chrome", // These commas at the end need added.
    "Firefox",
    "",
    "MSIE",
    "Mobile Safari"
]

You also need to add a ) at the very end of the Chart declaration:

您还需要在Chart声明的最后添加a）：

    options: {
        responsive: true
    }
}); // The rounded bracket here needs added

In the future, you should use the dev tools in your browser. The Console tab will tell you about errors like these. It explained exactly what line had errors.

将来，您应该在浏览器中使用开发工具。 “控制台”选项卡将告诉您有关这些错误的信息。它确切地解释了哪一行有错误。

After fixing these typos, I got a pie chart just as expected.

在解决了这些错别字后，我得到了一张饼图，正如预期的那样。

#1