使用chartjs生成基本饼图

Question

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

Answer 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>