图表js如何用颜色填充图例框答案

【问题标题】：chart js how to fill legend box with colour图表js如何用颜色填充图例框
【发布时间】：2021-07-28 01:30:11
【问题描述】：

我将Chart.js 用于折线图，我的图例如下。

问题是图例只有轮廓颜色，我希望图例框有整个颜色。我没有在文档中找到任何内容来了解为什么我的只有边框。我有点茫然，这是我的设置示例：

var LinuxDistributionsCombined = document.getElementById('LinuxDistributionsCombined');
var myChart = new Chart.Line(LinuxDistributionsCombined, {
  type: 'line',
  data: {
    labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017', 'Feb-2017', 'Mar-2017', 'Apr-2017', 'May-2017', 'Jun-2017', 'Jul-2017', 'Aug-2017', 'Sep-2017', 'Oct-2017'],
    datasets: [{
      label: 'Ubuntu-based',
      fill: true,
      data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
      borderColor: '#a6cee3',
      borderWidth: 1
    }, {
      label: 'Arch-based',
      fill: true,
      data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
      borderColor: '#1f78b4',
      borderWidth: 1
    }, {
      label: 'Solus',
      fill: true,
      data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
      borderColor: '#6a3d9a',
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: true
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: 'Percentage of users'
        }
      }]
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          var label = data.datasets[tooltipItem.datasetIndex].label;
          return label + ' ' + value + '%';
        }
      },
    },
  }
});

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您还必须为每个数据集设置 backgroundColor 属性，因为它对应于图例框的填充颜色。

...
datasets: [{
   label: 'Ubuntu-based',
   fill: true,
   data: [0, 0, 0, 0, 51.37, 51.04, 50.64, 50.29, 49.6, 48.32, 47.95, 47.03, 46.42, 46.21],
   backgroundColor: '#a6cee3',
   borderColor: '#a6cee3',
   borderWidth: 1
}, {
   label: 'Arch-based',
   fill: true,
   data: [0, 0, 0, 0, 28.52, 28.53, 28.75, 29.02, 29.16, 30.42, 30.65, 31.29, 31.53, 31.93],
   backgroundColor: '#1f78b4',
   borderColor: '#1f78b4',
   borderWidth: 1
}, {
   label: 'Solus',
   fill: true,
   data: [0, 0, 0, 0, 0.42, 0.45, 0.61, 0.64, 0.92, 1.12, 1.08, 1.21, 1.23, 1.46],
   backgroundColor: '#6a3d9a',
   borderColor: '#6a3d9a',
   borderWidth: 1
}]
...

【讨论】：

问题在于，结果是这样的：imgur.com/a/Ptorl 顶部填充覆盖了所有其他
如果您不想填写数据集，请为您的数据集设置fill: false
我现在也设置了backgroundColor，设置fill: false 正在制作传奇backgroundColor 也false。有没有其他方法可以在没有填充数据集的情况下获得填充图例
fill: false 真的很有帮助

【解决方案2】：

var ct = document.getElementById('myChart').getContext('2d');
var Chart = new Chart(ct, {
    type: 'line',
    data: {
        datasets: [{
            label: 'test',
            data:[1,10],
            backgroundColor: "rgb(0, 0, 0, 0)",
            borderColor: "rgb(0, 0, 255)",
            pointBackgroundColor: "rgb(0, 0, 255)",
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            },
            yAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'test'
            }
        }]
        }
    },
    plugins: [{

      beforeDraw: function(c) {
      var legends = c.legend.legendItems;
        legends.forEach(function(e) {
           e.fillStyle = 'red';
        });
      }

    }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="300"></canvas>

【讨论】：