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>