使用 chartjs 生成基本饼图

【问题标题】：generate basic pie chart using chartjs使用 chartjs 生成基本饼图
【发布时间】：2020-04-18 11:34:01
【问题描述】：

我正在使用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>

【问题讨论】：

标签： jquery chart.js

【解决方案1】：

根据Chart.js documentation：

对于饼图，数据集需要包含一组数据点。数据点应该是一个数字，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>

【讨论】：