ChartJS颜色特定的网格线

Question

所以我设计了一个堆积条形图，用于计算系统中未解决问题的数量。但是当这些问题开放太久时，我需要放置2条红色网格线。

选项：

OrderAgeOptions = {
            observeChanges: true, throttle: 100,
            title: { display: true, text: "Leeftijd openstaande tickets", fontFamily: 'ASSA Vesta Light', fontSize: 20, },
            legend: { display: true, labels: { fontFamily: 'Open Sans', }, position: "top", },
            maintainAspectRatio: false,
            tooltips: { enabled: false },
            hover: { animationDuration: 0 },
            scales: {
                xAxes: [{ ticks: { beginAtZero: true, fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11, max: 175 }, scaleLabel: { display: true }, gridLines: {}, stacked: true }],
                yAxes: [{ ticks: { fontFamily: "'Open Sans Bold', sans-serif", fontSize: 11 }, gridLines: { display: true, }, stacked: true }]
            },
            animation: { duration: 0.1, onComplete: function () { var chartInstance = this.chart; var ctx = chartInstance.ctx; ctx.textAlign = "right"; ctx.font = "10px Open Sans"; ctx.fillStyle = "#fff"; Chart.helpers.each(this.data.datasets.forEach(function (dataset, i) { var meta = chartInstance.controller.getDatasetMeta(i); Chart.helpers.each(meta.data.forEach(function (bar, index) { data = dataset.data[index]; if (data != 0) ctx.fillText(data, bar._model.x - 2, bar._model.y - 7); }), this) }), this); } },
            pointLabelFontFamily: "Open Sans",
            scaleFontFamily: "Open Sans",
        };

结果如下：

我需要什么：

有谁知道如何做到这一点？到目前为止我发现的只是改变所有网格线的外观，而不是特定的网格线。

Answer 1

据我所知，如果不改变或扩展chart.js库本身，就不可能改变特定网格线的颜色。

以下是如何根据需要扩展库的示例。

//Build the chart

  var data = {
      labels: ["January", "February", "March", "April", "May", "June"],
      datasets: [
          {
              label: "My First dataset",
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1,
              data: [65, 59, 80, 81, 56, 55, 40],
          }
      ]
  };

  //Load Chart
  var ctx = $("#myChart");
  var myBarChart = new Chart(ctx, {
      type: 'horizontalBar',
      data: data,
      options: {
          //Set the index of the value where you want to draw the line
          lineAtIndex: 60,
          legend: {
            display: false
          }
      }
  });

  //Create horizontalBar plug-in for ChartJS
  var originalLineDraw = Chart.controllers.horizontalBar.prototype.draw;
  Chart.helpers.extend(Chart.controllers.horizontalBar.prototype, {
  
      draw: function () {
          originalLineDraw.apply(this, arguments);
  
          var chart = this.chart;
          var ctx = chart.chart.ctx;
  
          var index = chart.config.options.lineAtIndex;
          if (index) {

              var xaxis = chart.scales['x-axis-0'];
              var yaxis = chart.scales['y-axis-0'];
              var barHeight = chart.scales['x-axis-0'].height
  
              var x1 = xaxis.getPixelForValue(0);                       
              var y1 = yaxis.getPixelForValue('April') - chart.scales['x-axis-0'].height;                                                       
              var x2 = xaxis.getPixelForValue(85);                       
              var y2 = yaxis.getPixelForValue('April') - chart.scales['x-axis-0'].height;                                      
  
              ctx.save();
              ctx.beginPath();
              ctx.moveTo(x1, y1);
              ctx.strokeStyle = 'red';
              ctx.lineTo(x2, y2);
              ctx.stroke();
              
                            var xaxis = chart.scales['x-axis-0'];
              var yaxis = chart.scales['y-axis-0'];
  
              var x1 = xaxis.getPixelForValue(0);                       
              var y1 = yaxis.getPixelForValue('May') - 30;                                                       
              var x2 = xaxis.getPixelForValue(85);                       
              var y2 = yaxis.getPixelForValue('May') - 30 ;                                      
  
              ctx.save();
              ctx.beginPath();
              ctx.moveTo(x1, y1);
              ctx.strokeStyle = 'red';
              ctx.lineTo(x2, y2);
              ctx.stroke();
  
              ctx.restore();
          }
      }
  });

<canvas id="myChart"></canvas>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js'></script>