使用 chart.js 在同一页面中绘制多个饼图时仅显示一次图例

Question

我正在同一页面中使用 chart.js 绘制多个饼图。所有饼图都有相同的图例。以下代码用于绘制饼图，每个饼图带有图例。

$scope. drawFunction = function()
        {

     new Chart(canvasVal, {
            type: 'bar',
            data: {
              labels: ["1900", "1950", "1999", "2050"],
              datasets: [{
                  label: "Europe",
                  type: "line",
                  borderColor: "#8e5ea2",
                  data: [408,547,675,734],
                  fill: false
                }, {
                  label: "Africa",
                  type: "line",
                  borderColor: "#3e95cd",
                  data: [133,221,783,2478],
                  fill: false
                }, {
                  label: "Europe",
                  type: "bar",
                  backgroundColor: "rgba(0,0,0,0.2)",
                  data: [408,547,675,734],
                }, {
                  label: "Africa",
                  type: "bar",
                  backgroundColor: "rgba(0,0,0,0.2)",
                  backgroundColorHover: "#3e95cd",
                  data: [133,221,783,2478]
                }
              ]
            },
            options: {
              title: {
                display: true,
                text: 'Population growth (millions): Europe & Africa'
              },
              legend: { display: true}
            }
        });
    }

HTML

<canvas id="pie-chart" width="800" height="450"></canvas>

目前每个图表显示相同的图例。我可以为所有绘制的饼图显示一个共同的图例吗？

更新

非常抱歉把代码搞乱了。请找到下面的代码片段

 $scope.drawFunc = function()
    {
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          },
          legend: {
          display: true
}
        }
    });
    }

Answer 1

我没有对用于显示图例属性的布尔值进行硬编码，而是在每次调用绘图函数时将其值作为参数传递。

$scope.drawFunc = function( legendBoolValue)
    {
    new Chart(document.getElementById("pie-chart"), {
        type: 'pie',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [{
            label: "Population (millions)",
            backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
            data: [2478,5267,734,784,433]
          }]
        },
        options: {
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          },
          legend: {
          display: legendBoolValue
}
        }
    });
    }

使用 chart.js 在同一页面中绘制多个饼图时仅显示一次图例

Displaying Legend only once when Several pie charts are drawn in the same page using chart.js

legend-properties

angularjs

pie-chart

chart.js