图表 JS 插件根据值更改线条颜色答案

【问题标题】：Chart JS plugin to change line color depending on value图表 JS 插件根据值更改线条颜色
【发布时间】：2020-05-28 03:26:36
【问题描述】：

我正在尝试创建一个折线图，其中线条（和点）的颜色取决于所绘制的值。例如，如果该值高于以下阈值[0, 115, 125]，则颜色将分别为['green', 'yellow', 'red']。

要求与此示例中实现的要求几乎相同：https://jsfiddle.net/egamegadrive16/zjdwr4fh/

不同之处在于我使用的是react-chart-js-2，因此无法以同样的方式访问draw() 方法。相反，建议创建一个插件来操作图表。

这是目前的插件代码：

import { Chart } from "react-chartjs-2";

class variableLineColorUtils {
  selectColor(value, thresholds, colors) {
    let color = colors[0];
    thresholds.every((limit, index) => {
      if (value < limit) return false;
      else color = colors[index];
      return true;
    });

    return color;
  }
}

const variableLineColor = {
  id: "variableLineColor",
  afterDraw: (chart, easing) => {
    const options = chart.options.variableLineColor;
    if (options) {
      const utils = new variableLineColorUtils();
      const datasets = chart.config.data.datasets;

      datasets.forEach((set, i) => {
        const points = chart.getDatasetMeta(i).data;
        points.forEach((point, index) => {
          const color = utils.selectColor(
            datasets[i].data[point._index],
            options.thresholds,
            options.colors
          );

          point.custom = { borderColor: color, backgroundColor: color };
        });
        chart.update();
      });
    }
  }
};

Chart.pluginService.register(variableLineColor);

export default variableLineColor;

这些是用于插件的options：

variableLineColor: {
  thresholds: [0, 115, 125],
  colors: ["green", "yellow", "red"]
}

这种方法只修改点本身的颜色，而不是点之间的线。该线仍保留在图表的默认 backgroundColor 中。

如何修改线条本身的颜色？

【问题讨论】：

真的很想获得奖金，但是，这能回答你的问题吗？ stackoverflow.com/questions/56429021/…
@keikai：评论不接受赏金。请对所有问题做出规范的回答以回答部分。
@mico 确定我知道指南，只是注意到重复的内容感觉更好，而不是答案。
真的很抱歉没有回应......我被感染了一个人流感！正如@mico 评论，要分配赏金，我需要一个有效的答案@keikai，如果你能提供一个，我会非常乐意分配赏金:)

标签： javascript charts chartjs-2.6.0 react-chartjs

【解决方案1】：

您可以使用plugins 数组创建一个新的beforeRender 插件来完成此操作。

plugins: [{
  beforeRender: (x, options) => {
    const c = x.chart;
    const dataset = x.data.datasets[0];
    const yScale = x.scales['y-axis-0'];
    const yPos = yScale.getPixelForValue(0);

    const gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
    gradientFill.addColorStop(0, 'rgb(86,188,77)');
    gradientFill.addColorStop(yPos / c.height, 'rgb(86,188,77)');
    gradientFill.addColorStop(yPos / c.height, 'rgb(229,66,66)');
    gradientFill.addColorStop(1, 'rgb(229,66,66)');

    const model = x.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].dataset._model;
    model.borderColor = gradientFill;
  },
}];

结果将如下所示：

这也适用于背景颜色，只需将model.borderColor 行更改为model.backgroundColor。例如：

【讨论】：

【解决方案2】：

为此，您将不得不像我查看以下代码一样操作您的数据。我怀疑你是否可以使用插件来做到这一点。

import React from 'react';
import { Line } from 'react-chartjs-2';

const data = {
  labels: [1, 2, 3, 4, 5, 6, 7, 8, 9],
  datasets: [
    {
      label: 'First one',
      fill: false,
      borderColor: 'gray',
      data: [null, null, 2, 0, 3],
    },
    {
      label: 'Second one',
      fill: false,
      borderColor: 'blue',
      data: [2, 4, 2, null, null, null, null, null, null],
    },
    {
      label: 'Third one',
      fill: false,
      borderColor: 'cyan',
      data: [null, null, null, null, 3, 4, 1, null, null],
    },
  ],
}

function App() {
  return (
    <div>
      <Line
        data={data}
      />
    </div>
  );
}



export default App

【讨论】：

我认为您可能是对的，我已经在研究一种解决方案，今天采用了类似的方法。一旦我确认一个可行的解决方案，我会分配赏金给你。

【解决方案3】：

尝试使用borderColor而不是backgroundColor，请参考ChartJs StackOverflow。它可能会解决您的问题。

【讨论】：

【解决方案4】：

使用边框颜色或颜色代替线条的背景颜色。

【讨论】：