Плагин Chart JS для изменения цвета линии в зависимости от значения

Question

Я пытаюсь создать линейную диаграмму, в которой цвет линии (и точек) зависит от отображаемого значения. Например, если значение выше следующих порогов [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.

Как изменить цвет самой линии?

Answer 1

Попробуйте использовать borderColor вместо backgroundColor и см. Диаграмма Js StackOverflow . Это может решить вашу проблему.

Answer 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

Answer 3

Используйте borderColor или цвет вместо backgroundColor линии.