Как установить цвет сетки chart.js для линейного графика

Question

Я хочу изменить цвет сетки моего линейного графика, используя поле параметров, но я не знаю, с чего начать. Сначала я попытался изменить цвета фона холста с помощью градиента, но результаты оказались не очень хорошими.

canvas{
background:linear-gradient(top, #ea1a07 0%, #f4b841 75%,#f2dd43 100%);
}

Однако я не получил то, что хотел, потому что, как вы видите на изображении выше, были окрашены не только сетки, но и значения x, метки y и условные обозначения диаграммы.

Изображение результата, который я получаю с помощью этого кода CSS

Пример того, что я хочу получить

мои параметры chart.js

options = {
        scales: {
          xAxes: [{
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 1
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              max: 100,
              min: 0,
              stepSize: 10
            },
            gridLines: {
              color: 'rgba(171,171,171,1)',
              lineWidth: 0.5
            }
          }]
        },
        responsive: true
      };

Итак, есть ли способ установить только 3 цвета фона для фона сетки (с градиентом или нет)? NB: я использую chart.js с угловым 2 (ng2-charts)

Answer 1

Самый простой способ сделать это - использовать chartjs-plugin-annotation подключите и настройте 3 аннотации блока, привязанных к вашей оси Y (каждый блок будет иметь свой цвет).

Вот пример ниже (и вы можете увидеть его в действии с помощью этого кода).

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    datasets: [{
      label: 'Points',
      data: [
        {x: 0, y: 2},
        {x: 1, y: 3}, 
        {x: 2, y: 2},
        {x: 1.02, y: 0.4},
        {x: 0, y: -1}
      ],
      backgroundColor: 'rgba(123, 83, 252, 0.8)',
      borderColor: 'rgba(33, 232, 234, 1)',
      borderWidth: 1,
      fill: false,
    }],
  },
  options: {
    title: {
      display: true,
      text: 'Chart.js - Gridline Background',
    },
    scales: {
      xAxes: [{
        type: 'linear',
        position: 'bottom',
        ticks: {
          min: -1,
          max: 8,
          stepSize: 1,
          fixedStepSize: 1,
        },
        gridLines: {
          color: 'rgba(171,171,171,1)',
          lineWidth: 1
        }
      }],
      yAxes: [{
        afterUpdate: function(scaleInstance) {
          console.dir(scaleInstance);
        },
        ticks: {
          min: -2,
          max: 4,
          stepSize: 1,
          fixedStepSize: 1,
        },
        gridLines: {
          color: 'rgba(171,171,171,1)',
          lineWidth: 0.5
        }
      }]
    },
    annotation: {
      annotations: [{
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  1,
        yMax: 4,
        borderColor: 'rgba(255, 51, 51, 0.25)',
        borderWidth: 2,
        backgroundColor: 'rgba(255, 51, 51, 0.25)',
      }, {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  -1,
        yMax: 1,
        borderColor: 'rgba(255, 255, 0, 0.25)',
        borderWidth: 1,
        backgroundColor: 'rgba(255, 255, 0, 0.25)',
      }, {
        type: 'box',
        yScaleID: 'y-axis-0',
        yMin:  -2,
        yMax: -1,
        borderColor: 'rgba(0, 204, 0, 0.25)',
        borderWidth: 1,
        backgroundColor: 'rgba(0, 204, 0, 0.25)',
      }],
    }
  }
});

Важно отметить, что аннотации нарисованы в верхней части диаграммы, поэтому цвет аннотации должен содержать некоторую прозрачность, чтобы видеть материал, стоящий за ним.

Нет проблем с использованием этого плагина с ng2-чартами. Просто добавьте источник в <script> в HTML-файл вашего приложения и добавьте annotation собственность в ваш options объект. Вот пример Angular2 / ng2-charts, демонстрирующий, как использовать плагин аннотаций.