Как добавить цвет фона между двумя строками в yAxis Chartjs

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

Линейный график ChartJS

также вот мои конфигурации chartjs

 this.options = {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          xAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
          yAxes: [
            {
              gridLines: {
                display: true,
                color: chartjs.axisLineColor,
              },
              ticks: {
                fontColor: chartjs.textColor,
              },
            },
          ],
        },
        legend: {
          labels: {
            fontColor: chartjs.textColor,
          },
        },
      };

javascript chart.js chartjs-2.6.0
person Ahmed Magdy    schedule 15.03.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Вы должны зарегистрировать свой собственный плагин для заполнения области диаграммы перед рисованием линии диаграммы. :

Chart.pluginService.register({
  beforeDraw: function (chart, easing) {
    if (chart.config.options.fillColor) {
      var ctx = chart.chart.ctx;
      var chartArea = chart.chartArea;
      ctx.save();
      ctx.fillStyle = chart.config.options.fillColor;
      ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
      ctx.restore();
    }
  }
});

var chartData = {
  labels: ['a', 'b', 'c', 'd'],
  datasets: [{
    label: 'value',
    backgroundColor: 'rgba(255, 0, 255, 0.8)',
    borderColor: 'blue',
    data: [30, 50, 25, 10]
  }]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myBar = new Chart(ctx, {
  type: 'line',
  data: chartData,
  options: {
  	scales: {
    	yAxes: [{ ticks: { max: 60 } }]
    },
  	legend: { display: false },
		fillColor: 'rgba(255, 128, 0, 0.8)',
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

<canvas id="myChart" height="300" width="500"></canvas>

person beaver    schedule 15.03.2018
comment
именно это я и хотел сделать, я изменил его на ctx.fillStyle = chart.config.options.fillColor; ctx.fillRect(chartArea.left, chartArea.top+ (step), chartArea.right - chartArea.left, (chartArea.bottom - chartArea.top)/4); спасибо - person Ahmed Magdy; 16.03.2018