ChartJS различный фоновый градиент в зависимости от данных (линейный график)

Question

Я пытаюсь создать нечто похожее на это, используя линейный график ChartJS.У меня верхний градиент работает так, как я хочу, но я просто не могу найти способ изменить нижний градиент, когда значение моих данных ниже 0.

Я пытался использовать массив разных цветов фонаосновываясь на моих данных, и я попытался использовать плагин beforeDraw, чтобы изменить цвет фона (он изменил их все на один и тот же цвет).

Answer 1

Проблема Chart.js # 3071 Несколько цветов заливки для линейного графика , кажется, соответствуют вашей цели.Официальный ответ - использовать CanvasGradient .К счастью, у 'berosoboy' есть встроенный плагин для этого.Рабочий пример приведен ниже.Я немного изменил его, чтобы удалить ссылки на window.myColors.

let posColour = 'rgba(0, 255, 0, .1)',
  negColour = 'rgba(255, 0, 0, .1)',
  myBarChart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
      datasets: [{
        label: 'Series1',
        data: [1, -1, 1, -1, 1, -1, 1, -1, 1, -1]
      }]
    },
    options: {
      maintainAspectRatio: false
    },
    // source: https://github.com/chartjs/Chart.js/issues/3071#issuecomment-371001496
    plugins: [{
      beforeRender: function(c, options) {
        var dataset = c.data.datasets[0];
        var yScale = c.scales['y-axis-0'];
        var yPos = yScale.getPixelForValue(0);

        var gradientFill = c.ctx.createLinearGradient(0, 0, 0, c.height);
        gradientFill.addColorStop(0, posColour);
        gradientFill.addColorStop(yPos / c.height - 0.01, posColour);
        gradientFill.addColorStop(yPos / c.height + 0.01, negColour);
        gradientFill.addColorStop(1, negColour);

        var model = c.data.datasets[0]._meta[Object.keys(dataset._meta)[0]].$filler.el._model;
        model.backgroundColor = gradientFill;
      }
    }]
  });

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>