ChartJS 图表JS折线图多工具提示键背景色问题

yqhsw0fo  于 2023-03-02  发布在  Chart.js
关注(0)|答案(1)|浏览(176)

我有一个关于Chart.js的问题。我正在使用一个包含2组数据(2行)的折线图,当我将鼠标悬停在数据上时,它会显示“图例”。图例中有2个可以着色的框。我可以更改框的背景颜色,但没有问题,但当我更改颜色时,它会应用于两个框。我如何单独设置框的颜色?谢谢。

  1. <canvas
  2. class="ex-line-graph"
  3. width="1200" height="1200"
  4. data-chart="line"
  5. data-scale-start-value="0"
  6. data-scale-step-width ="100"
  7. data-scale-steps ="4"
  8. data-point-fill-color = "RGBA( 255,28,221,.3)"
  9. data-scale-line-color="transparent"
  10. data-scale-grid-line-color="rgba(255,255,255,.05)"
  11. data-scale-font-color="#a2a2a2"
  12. data-labels=" ['April','May','June','July','August','September','October','November','December ','January','February','March']"
  13. data-value="[{ fillColor: 'RGBA( 28,168,221,.3)', strokeColor:
  14. '#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] }]">
  15. </canvas>
yebdmbv4

yebdmbv41#

这是一个2部分的答案,如果我按照正确:
1.-指定数据集的颜色:

  1. var data = {
  2. labels: ["January", "February", "March", "April", "May"],
  3. datasets: [{
  4. label: "Series A",
  5. data: [10, 30, 20, 40, 10],
  6. borderColor: "rgba(0,0,255,0.8)",
  7. backgroundColor:"rgba(0,0,255,0.5)"
  8. }, {
  9. label: "Series B",
  10. data: [25, 40, 10, 40, 30],
  11. borderColor: "rgba(255,0,0,0.8)",
  12. backgroundColor:"rgba(255,0,0,0.5)"
  13. }]
  14. };

并启用选项对象上的工具提示(注意模式标签):

  1. var options = {
  2. tooltips: {
  3. enabled: true,
  4. mode: 'label'
  5. },
  6. legend: {
  7. display: true,
  8. }
  9. };

结果:

编码员:
Codepen - Chart.js Multiline Tooltip labels

展开查看全部

相关问题