使用chart.js绘制饼图

独奏

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

我想绘制一个饼图,但是什么也没显示。我设法绘制了折线图,因此加载了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>
内森·赫夫利(Nathan Heffley)

您的代码中有一些错字。

在标签部分,每个标签后都需要用逗号隔开:

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

您还需要)在Chart声明的最后添加一个

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

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

修正这些错字后,我得到了预期的饼图。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章