Angular11下ng2-charts折线图如何让工具提示颜色匹配对应折线颜色

你当前的图表配置没有绑定tooltip条目和对应数据集的颜色关联逻辑，Chart.js v2版本默认所有tooltip条目使用统一的灰色标记块和灰色文本，不会自动继承你为每个折线单独设置的borderColor值。

仅需在现有chartOptions的tooltips配置块中新增两个颜色回调，动态读取对应折线的边框色赋值给tooltip元素即可，现有数据集配置、模板代码完全不需要修改。
适配Angular11对应的ng2-charts v2.x版本（底层依赖Chart.js v2.9.x）的完整配置如下，直接替换原有chartOptions即可：

public chartOptions: ChartOptions = {
  responsive: true,
  tooltips: {
    mode: 'index',
    intersect: false,
    callbacks: {
      // 自定义tooltip条目前的颜色标记块
      labelColor: (tooltipItem) => {
        const currentDataset = this.chartData[tooltipItem.datasetIndex];
        return {
          borderColor: currentDataset.borderColor,
          backgroundColor: currentDataset.borderColor,
        }
      },
      // 自定义tooltip条目的文本颜色
      labelTextColor: (tooltipItem) => {
        const currentDataset = this.chartData[tooltipItem.datasetIndex];
        return currentDataset.borderColor as string;
      }
    }
  },
  maintainAspectRatio: false,
  legend: {
    display: false,
  },
  scales: {
    xAxes:  [
      {
        gridLines: {
          drawBorder: false,
          display: false,
        },
      },
    ],
    yAxes: [
      {
        ticks: {
          maxTicksLimit: 3,
        },
        gridLines: {
          drawBorder: false,
        },
      },
    ],
  },
};

• 每个tooltip条目的前置颜色块、文本颜色都会和对应折线的边框色完全匹配，比如半透明虚线折线对应的tooltip条目就是半透红色，实线红折线对应的tooltip条目就是正红色
• 完全兼容你现有所有图表行为：包括index模式下同时展示同横坐标下的所有数据集数值、hover不强制触发点交互、隐藏图例、坐标轴网格线样式等配置都不会受影响

• 不要硬编码颜色值写死在回调里，一定要通过tooltipItem.datasetIndex动态从chartData中读取颜色，后续调整折线颜色时tooltip会自动同步，不需要重复维护配置
• 不要在tooltips的全局配置里写统一的bodyFontColor，否则会覆盖单个条目的自定义文本颜色，失去和折线颜色联动的效果
• 若后续升级ng2-charts到v3+版本适配更高Angular版本，仅需将回调入参从tooltipItem调整为context结构，通过context.datasetIndex取对应数据集的颜色即可，核心联动逻辑不变

内容的提问来源于stack exchange，提问作者Norbert Bartko