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

Question

我正在使用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 + '%';
        }
      },
    },
  }
});

Answer 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
}]
...