javascript - 用chart js修改双 donut 的图例

Question

我正在尝试为使用图表js 创建的圆环图创建图例。问题是我堆叠了两个圆环图，在创建图例时它默认为第一个圆环图的标签。

我希望图例显示时蓝色标签为 CPU，绿色标签为 MEM。目前，将鼠标悬停在任一 donut 上时的标签是免费的，并且我想保留这些标签。

这是用于创建图表的脚本

var responseChartLoad = new Chart(responseChartCanvas, {
    type: 'doughnut',
    data: {
        labels: ["Used", "Free"],
        datasets: [{
            data: [0, 100],
            backgroundColor: [
                '#42a5f5',
                '#eceff1',
            ],
            borderColor: [
                '#FFF',
                '#FFF'
            ],
            borderWidth: 2
        }, {
            data: [0, 100],
            backgroundColor: [
                '#4db6ac',
                '#eceff1',
            ],
            borderColor: [
                '#FFF',
                '#FFF'
            ],
            borderWidth: 2
        }]
    },
    options: {
        responsive: true,
        cutoutPercentage: 50,
        animation: {
            animateRotate: true
        },
        legend: {
            display: true,
            position: 'bottom'
        },
        elements: {
            center: {
                text: 'CPU/MEM',
                fontStyle: 'Helvetica', //Default Arial
                sidePadding: 50 //Default 20 (as a percentage)
            }
        }
    }
});

Answer 1

要实现这一点，您必须生成自定义图例项，这可以使用generateLabels来完成。图例的标签的方法，如下:

legend: {
   labels: {
      generateLabels: function() {
         return [{
            text: 'CPU',
            fillStyle: '#42a5f5',
            strokeStyle: '#fff'
         }, {
            text: 'MEM',
            fillStyle: '#4db6ac',
            strokeStyle: '#fff'
         }];
      }
   }
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var responseChartLoad = new Chart('responseChartCanvas', {
   type: 'doughnut',
   data: {
      labels: ["Used", "Free"],
      datasets: [{
         data: [10, 100],
         backgroundColor: [
            '#42a5f5',
            '#eceff1',
         ],
         borderColor: [
            '#FFF',
            '#FFF'
         ],
         borderWidth: 2
      }, {
         data: [5, 100],
         backgroundColor: [
            '#4db6ac',
            '#eceff1',
         ],
         borderColor: [
            '#FFF',
            '#FFF'
         ],
         borderWidth: 2
      }]
   },
   options: {
      responsive: true,
      cutoutPercentage: 50,
      animation: {
         animateRotate: true
      },
      legend: {
         display: true,
         position: 'bottom',
         labels: {
            generateLabels: function() {
               return [{
                  text: 'CPU',
                  fillStyle: '#42a5f5',
                  strokeStyle: '#fff'
               }, {
                  text: 'MEM',
                  fillStyle: '#4db6ac',
                  strokeStyle: '#fff'
               }];
            }
         }
      },
      elements: {
         center: {
            text: 'CPU/MEM',
            fontStyle: 'Helvetica', //Default Arial
            sidePadding: 50 //Default 20 (as a percentage)
         }
      }
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="responseChartCanvas"></canvas>