使用图表颜色动态更改工具提示的背景颜色

Question

我有一个包含4个数据集的折线图，我想为所有4条线显示不同的工具提示背景。但是工具提示不支持动态背景色，该怎么做？

Answer 1

有效的“动态”示例。

***请记住对与您的数据结构相关的数据的访问。

使用tooltip-model https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-model

“ hello world”示例-将所有工具提示背景更改为red：

tooltips: {
   custom: function(tooltipModel) {
   tooltipModel.backgroundColor = "red";
  }
},

代码段：

var data = {
  labels: ["Africa", "Asia", "Europe", "America"],
  datasets: [{
    /* data */
    label: "Population (millions)",
    backgroundColor: ["red", "blue","green", 'purple'],
    data: [1000,1500,2000, 2200]
  }]
};

var options = {
  title: {
    text: 'Dynamically change tooltip background example',
    display: true
  },
  tooltips: {
    titleFontSize: 20,
    borderWidth: 2,
    borderColor: "white",
    displayColors: false, /* if true, color boxes are shown in the tooltip */
    /*########### Custom model ###########*/
    custom: function(tooltipModel) {
      /* if data & datasets not empty & tooltip available */
      if (tooltipModel.opacity !== 0 && data.labels.length && data.datasets.length) {
        /* get dataPoints index */
        var index = tooltipModel.dataPoints[0].index;
        /* get dataPoints datasetIndex */
        var dataSetIndex = tooltipModel.dataPoints[0].datasetIndex;
        /* get the current color on index and datasetIndex position */
        var color =  data.datasets[dataSetIndex].backgroundColor[index];
        /* set backgroundColor */
        tooltipModel.backgroundColor = color;
      };

    }
  },
  scales: {
    xAxes: [{
      stacked: true
    }],
    yAxes: [{
      stacked: true
    }]
  }
};

var myChart = new Chart(document.getElementById("chart"), {
  type: 'bar',
  data: data,
  options: options
});

<canvas id="chart" width="800" height="450"></canvas>



<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

代码大纲

1. “如果”（为避免控制台错误）：

/*########### Custom model ###########*/
custom: function(tooltipModel) {
      /* if data & datasets not empty & tooltip available */
      if (tooltipModel.opacity !== 0 && data.labels.length && data.datasets.length) {
     /* do something */
     console.log(tooltipModel.dataPoints[0]); /* return object */

console.log返回对象：

Object {
  datasetIndex: 0,
  index: 1,
  label: "Asia",
  value: "1500",
  x: 338.6845703125,
  xLabel: "Asia",
  y: 215.28,
  yLabel: 1500
}

1. 我们使用dot (.) notation访问对象值。

console.log(tooltipModel.dataPoints[0].index); /* return 1 */

1. 我们使用索引“ anchor”来获取backgroundColor数组的正确索引：

console.log(data.datasets[dataSetIndex].backgroundColor[index]); /* return "blue"

1. 最后一步是使用此颜色值：

/* set backgroundColor */
tooltipModel.backgroundColor = color;

UI

用于隐藏color boxes：

displayColors: false, /* if true, color boxes are shown in the tooltip */

https://www.chartjs.org/docs/2.7.3/configuration/tooltip.html#tooltip-configuration

codepen：

https://codepen.io/ezra_siton/pen/dyoQeGe?editors=1011

Answer 2

今天我也遇到了同样的问题。解决方案正在实现自定义工具提示方法，但您无需从头开始创建自定义工具提示。

None

此代码对我有用。根据您单击的工具提示，它将带出colorArray中的颜色索引。