首页 文章

使用图表js修改双甜甜圈的图例

提问于
浏览 次
0

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

enter image description here

我希望图例以蓝色标签显示为CPU，绿色标签显示为MEM . 目前悬停在甜甜圈上的标签是免费的，我想保留使用 .

这是用于创建图表的脚本

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)
            }
        }
    }
});
javascript chart.js

1 回答

  • 2

    要实现这一点，您必须生成自定义图例项，这可以使用图例标签的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>
    回复于

相关问题