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

yqhsw0fo 于 2023-03-02 发布在 Chart.js

关注(0)|答案(1)|浏览(148)

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

<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>

chart.js

来源：https://stackoverflow.com/questions/40094194/chart-js-line-graph-multitooltipkey-background-color-issue

1条答案

按热度按时间

yebdmbv41#

这是一个2部分的答案，如果我按照正确：
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)"
  }]
};

并启用选项对象上的工具提示（注意模式标签）：

var options = {
  tooltips: {
   enabled: true,
   mode: 'label'
 },          
  legend: {
    display: true,
  }  
};

结果：

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

赞(0）回复(0）举报 2023-03-02

我来回答

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

1条答案

相关问题

热门标签

最新问答