时间戳

首页 > 解决方案 > 使用 chartjs 生成基本饼图

jquery - 使用 chartjs 生成基本饼图

问题描述

我正在使用ChartJs库来生成一个非常基本的饼图。我只想显示两个数据AAA并BBB标记，但下面的代码没有创建任何饼图，甚至没有得到任何错误。我该如何解决？我在这里做错了什么？

html:

<canvas id="LossProfit"></canvas>

ChartJs：

<script>

    var LossProfit = document.getElementById('LossProfit').getContext('2d');
    var myPieChart = new Chart(LossProfit, {
        type: 'pie',
        data: [
            {
                label: 'AAA',
                value: 20,
                color: "#1a5279"
            },
            {
                label: 'BBB',
                value: 40,
                color: "#1a5279"
            }
        ],
        options: {
            responsive: true
        }
    });
</script>

标签： jquerychart.js

解决方案

根据Chart.js 文档：

对于饼图，数据集需要包含一组数据点。数据点应该是一个数字，Chart.js 将汇总所有数字并计算每个数字的相对比例。

您还需要指定一个标签数组，以便正确显示工具提示。

请查看下面的修改后的代码，现在可以正常工作。

new Chart(document.getElementById('LossProfit'), {
  type: 'pie',
  data: {
    labels: ['AAA', 'BBB'],
    datasets: [{
      data: [20, 40],
      backgroundColor: ["#1a5279", "#f78159"]
    }],
  },
  options: {
    responsive: true
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="LossProfit" height="100"></canvas>

推荐阅读