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>