Chart.js+ng2-charts折线图正负值分色：context.dataIndex未定义求助

问题原因 #

Chart.js 2.x版本中，borderColor的回调函数接收的参数并非包含dataIndex的上下文对象——这个回调是针对整个数据集生效的，而非单个数据点或线段，所以你无法通过context.dataIndex获取到单条数据的索引，这是版本特性导致的功能失效。

解决方案 #

在Chart.js 2.x中，要实现折线图正负值对应线段颜色区分，需要通过自定义插件来修改线段样式。以下是适配你的版本的实现代码：

1. 定义Chart.js插件

const negativeLineColorPlugin = {
  afterDatasetUpdate: function(chart) {
    const dataset = chart.data.datasets[0]; // 针对第一个数据集，可根据需求调整
    const meta = chart.getDatasetMeta(0);
    const points = meta.data;

    // 遍历每个线段（相邻两个点为一段）
    for (let i = 1; i < points.length; i++) {
      const prevValue = dataset.data[i-1];
      const currValue = dataset.data[i];
      // 判断线段对应的数值是否为负（可根据需求调整判断逻辑，比如只要其中一个值为负就变色）
      const isNegative = prevValue < 0 || currValue < 0;
      // 修改线段颜色
      meta.data[i]._model.borderColor = isNegative ? 'rgb(255, 0, 0)' : 'rgb(235,100,76)';
    }
  }
};

2. 在图表配置中注册插件

// 你的图表配置
lineChartOptions: ChartOptions = {
  plugins: {
    // 注册自定义插件
    customNegativeLineColor: negativeLineColorPlugin
  },
  // 其他配置项...
};

// 你的数据集配置（去掉原borderColor的回调）
lineChartData: ChartDataSets[] = [{
  data: [], // 后续通过API填充数据
  backgroundColor: 'rgba(255, 255, 255, 0)',
  borderColor: 'rgb(235,100,76)', // 默认线条颜色
  label: 'Net Amount'
}];

3. 在组件中确保插件生效
   如果是Angular组件，直接在配置中引入即可（ng2-charts 2.x支持在options.plugins中配置自定义插件），无需额外注册步骤。

注意事项 #

• 插件中的判断逻辑可根据需求调整：比如你希望只要当前点数值为负就改变对应线段颜色，或者相邻两点中有一个为负就变色，都可以修改isNegative的判断条件。
• 若存在多个数据集，需要调整插件中dataset和meta的索引，或者遍历所有数据集。

内容的提问来源于stack exchange，提问作者athul rajesh