chart js 색상으로 범례 상자를 채우는 법

Question

챠트 차트에 chart.js http://www.chartjs.org/을 사용하고 있으며 전설이 있습니다. 여기 예 : https://imgur.com/a/OIgXS

문제는 범례에 윤곽선 색만있는 것이므로 전설 상자에 모든 것이 채워지 길 원합니다. 왜 문서에 국경 만 가지고 있는지 알지 못했습니다.

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