更改Chart.js中图例的边框颜色
我想删除或更改图例字段上边框的颜色 今天,有一个灰色的边框,但我不能改变颜色,我希望它像盒子的颜色 我曾尝试在图例中添加更改Chart.js中图例的边框颜色,chart.js,Chart.js,我想删除或更改图例字段上边框的颜色 今天,有一个灰色的边框,但我不能改变颜色,我希望它像盒子的颜色 我曾尝试在图例中添加边框宽度,但没有成功。 我设法在图表中更改了边框颜色,但在图例中无法更改 这是我的图表代码: var chart = document.getElementById("chart-out-rating"); var myChart = new Chart(chart, { type: 'bar', data: { labe
边框宽度
,但没有成功。
我设法在图表中更改了边框颜色,但在图例中无法更改
这是我的图表代码:
var chart = document.getElementById("chart-out-rating");
var myChart = new Chart(chart, {
type: 'bar',
data: {
labels: datasetPrimeurPrice.year,
datasets: [{
label: 'Prix HT',
data: datasetPrimeurPrice.outingPrice,
backgroundColor: [
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)',
'rgba(255, 166, 48, 0.3)'
],
borderColor: [
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)',
'rgba(255, 166, 48)'
],
borderWidth: 1,
yAxisID: 'y-axis-1'
},
{
label: 'Note',
type: 'line',
data: datasetPrimeurPrice.rating,
fill: false,
usePointStyle: true,
backgroundColor: '#71B37C',
borderColor: '#71B37C',
hoverBackgroundColor: '#71B37C',
hoverBorderColor: '#71B37C',
yAxisID: 'y-axis-2'
}
]
},
options: {
tooltips: {
mode: 'label',
callbacks: {
label: function (tooltipItems, data) {
if (tooltipItems.datasetIndex == 0) {
return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel + ' €';
} else {
return data.datasets[tooltipItems.datasetIndex].label + ': ' + tooltipItems.yLabel;
}
}
}
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: false
},
labels: {
show: true
}
}],
yAxes: [{
type: "linear",
display: true,
position: "left",
id: "y-axis-1",
gridLines: {
display: false
},
labels: {
show: true
},
ticks: {
beginAtZero: true,
callback: function (value, index, values) {
return value + " €";
}
}
}, {
type: "linear",
display: true,
position: "right",
id: "y-axis-2",
gridLines: {
display: false
},
labels: {
show: true,
usePointStyle: true
},
ticks: {
min: 75
}
}]
},
responsive: true,
maintainAspectRatio: true,
showLines: false,
legend: {
display: true,
labels: {
borderWidth: 0
}
}
}
});
您可以在我的页面上看到结果:
可能有效的方法是将边框颜色设置为透明,或将不透明度设置为0(结果相同)。您现在拥有的是:
borderColor: ['rgba(255, 166, 48)', ...]
我的例子是:
borderColor: ['rgba(255, 255, 255, 0)', ...]
希望这能帮助您解决问题并发挥作用;-) 或者,您可以尝试删除所有“borderColor:…”属性行。