Javascript Chart JS折线图multitooltipkey背景色问题
我有一个关于Chart.js的问题。我正在使用一个包含两组数据(2行)的折线图,当我将鼠标悬停在数据上时,它会显示“图例”。图例中有两个可以着色的框。我可以毫无问题地更改框的背景色,但当我更改颜色时,它将应用于两个框。如何分别设置盒子的颜色?谢谢Javascript Chart JS折线图multitooltipkey背景色问题,javascript,canvas,chart.js,Javascript,Canvas,Chart.js,我有一个关于Chart.js的问题。我正在使用一个包含两组数据(2行)的折线图,当我将鼠标悬停在数据上时,它会显示“图例”。图例中有两个可以着色的框。我可以毫无问题地更改框的背景色,但当我更改颜色时,它将应用于两个框。如何分别设置盒子的颜色?谢谢 <canvas class="ex-line-graph" width="1200" height="1200" data-chart="line" data-scale-start-value="0"
<canvas
class="ex-line-graph"
width="1200" height="1200"
data-chart="line"
data-scale-start-value="0"
data-scale-step-width ="100"
data-scale-steps ="4"
data-point-fill-color = "RGBA( 255,28,221,.3)"
data-scale-line-color="transparent"
data-scale-grid-line-color="rgba(255,255,255,.05)"
data-scale-font-color="#a2a2a2"
data-labels=" ['April','May','June','July','August','September','October','November','December ','January','February','March']"
data-value="[{ fillColor: 'RGBA( 28,168,221,.3)', strokeColor:
'#1CA8DD', label:'Data', data: [151, 154, 173, 169, 176,161,0,0,0,0,0,0]}, {fillColor: 'RGBA(37,40,48,.0)', strokeColor: 'rgba(255,255,255,1)', label :'Target', data: [200, 200,200,200,200, 200,200,200,200, 200,200,200] }]">
</canvas>
如果我没有弄错,这是一个由两部分组成的答案: 1.-在数据集上指定颜色:
var data = {
labels: ["January", "February", "March", "April", "May"],
datasets: [{
label: "Series A",
data: [10, 30, 20, 40, 10],
borderColor: "rgba(0,0,255,0.8)",
backgroundColor:"rgba(0,0,255,0.5)"
}, {
label: "Series B",
data: [25, 40, 10, 40, 30],
borderColor: "rgba(255,0,0,0.8)",
backgroundColor:"rgba(255,0,0,0.5)"
}]
};
并在选项对象上启用工具提示(请注意模式标签):
结果:
代码笔:
你好。谢谢你的回答。我正在寻找一个HTML的答案,但是。我忘了提那件事了。我很抱歉。@user45481:Chart.js配置是通过Javascript完成的,您给它一个带有选项的画布,它会用HTML为您构建一个图表,您确定要使用Chart.js吗?是的。当我在chart.js中更改多工具提示键背景时,它会同时更改图例框的颜色。如果我输入了两种颜色,那么第一种颜色和第二种颜色都是一样的。我需要一种方法来分别定义它们。
var options = {
tooltips: {
enabled: true,
mode: 'label'
},
legend: {
display: true,
}
};