グリッド線が隠されているときのChartJS棒グラフの軸のスタイルの編集

Question

グリッド線がfalseに表示された棒グラフがあります。今、軸線（xとy）に対してのみ、幅と色を設定する必要があります。私はグリッド線を非表示にするとき、私は唯一の軸の、スタイリング（幅や色）を設定することができません、しかし

options:{ 
    scales: { 
    xAxes: [{ 
     gridLines: { 
      color: "rgba(0,0,0,1)", 
      lineWidth: 1 
     } 
    }], 
    yAxes: [{ 
     gridLines: { 
      color: "rgba(0,0,0,1)", 
      lineWidth: 1 
     } 
    }], 
    } 
} 

：私はこれらの値を設定することができます。

options:{ 
    scales: { 
    xAxes: [{ 
     gridLines: { 
     display:false 
     } 
    }], 
    yAxes: [{ 
     gridLines: { 
     display:false 
     } 
    }], 
    } 
} 

私はscaleLineColorを試しましたが、それも機能していないようです。ここに私の完全なコードは次のとおりです。

var q1 = document.getElementById("q1").getContext('2d'); 
    var q1Chart = new Chart(q1, { 
     type: 'bar', 
     data: { 
     labels: ["Very Good(9-10)","Good(8-7)","OK(5-6)","Bad (3-4)","Cant be worse (0-2)"], 
     datasets: [{ 
      label: "Our Performance", 
      data: [19.56,37.90,1.29,30.36,10.89], 
      backgroundColor: ["#d93030","#288fba","#367fa9","#367fa9","#367fa9"], 
      datalabels: { 
      align: 'top', 
      anchor: 'end', 
      font: { 
       size: 18, 
       weight: 900, 
      }, 
      formatter: function(value) { 
       var label = value; 
       var keys, klen, k; 
       return label + '%'; 
      } 
      } 
     }] 
     }, 
     scaleLineColor: "rgba(0,0,0,1)", 
     options:{ 
       scales: { 
      xAxes: [{ 
      barThickness : 50, 
      ticks: { 
       fontColor: "black", 
       fontSize: 20, 
       autoSkip: false, 
      }, 
      gridLines: { 
       display:false 
      } 
      }], 
      yAxes: [{ 
      ticks: { 
       fontColor: "black", 
       fontSize: 20, 
       beginAtZero: true, 
       stepSize: 10 
      }, 
      gridLines: { 
       display:false 
      } 
      }], 
     }, 
     responsive: false, 
     maintainAspectRatio: true, 
     legend: { 
      display: false 
     }, 
     tooltips: { 
      enabled: false 
     }, 
     layout: { 
      padding: { 
       left: 0, 
       right: 0, 
       top: 30, 
       bottom: 0 
      } 
     } 
     }, 
    }); 

Answer 1

私はこれを行うために知っている唯一の方法は、それを

Chart.pluginService.register({ 
    afterDraw: function (chart, easing) { 
    if (chart.config.options && chart.config.options.scales) { 
     if (chart.config.options.scales.xAxes) 
     chart.config.options.scales.xAxes.forEach(function (xAxisConfig) { 
      if (!xAxisConfig.color) 
      return; 

      var ctx = chart.chart.ctx; 
      var chartArea = chart.chartArea; 
      var xAxis = chart.scales[xAxisConfig.id]; 

      // just draw the scale again with different colors 
      var color = xAxisConfig.gridLines.color; 
      xAxisConfig.gridLines.color = xAxisConfig.color; 
      xAxis.draw(chartArea); 
      xAxisConfig.gridLines.color = color; 
     }); 

     if (chart.config.options.scales.yAxes) 
     chart.config.options.scales.yAxes.forEach(function (yAxisConfig) { 
      if (!yAxisConfig.color) 
      return; 

      var ctx = chart.chart.ctx; 
      var chartArea = chart.chartArea; 
      var yAxis = chart.scales[yAxisConfig.id]; 

      var color = yAxisConfig.gridLines.color; 
      yAxisConfig.gridLines.color = yAxisConfig.color; 
      yAxis.draw(chartArea); 
      yAxisConfig.gridLines.color = color; 

      ctx.restore(); 
     }); 
    } 
    } 
}); 

Chart.pluginService.register({ 
 
    afterDraw: function (chart, easing) { 
 
    if (chart.config.options && chart.config.options.scales) { 
 
     if (chart.config.options.scales.xAxes) 
 
     chart.config.options.scales.xAxes.forEach(function (xAxisConfig) { 
 
      if (!xAxisConfig.color) 
 
      return; 
 

 
      var ctx = chart.chart.ctx; 
 
      var chartArea = chart.chartArea; 
 
      var xAxis = chart.scales[xAxisConfig.id]; 
 

 
      // just draw the scale again with different colors 
 
      var color = xAxisConfig.gridLines.color; 
 
      xAxisConfig.gridLines.color = xAxisConfig.color; 
 
      xAxis.draw(chartArea); 
 
      xAxisConfig.gridLines.color = color; 
 
     }); 
 

 
     if (chart.config.options.scales.yAxes) 
 
     chart.config.options.scales.yAxes.forEach(function (yAxisConfig) { 
 
      if (!yAxisConfig.color) 
 
      return; 
 

 
      var ctx = chart.chart.ctx; 
 
      var chartArea = chart.chartArea; 
 
      var yAxis = chart.scales[yAxisConfig.id]; 
 

 
      var color = yAxisConfig.gridLines.color; 
 
      yAxisConfig.gridLines.color = yAxisConfig.color; 
 
      yAxis.draw(chartArea); 
 
      yAxisConfig.gridLines.color = color; 
 

 
      ctx.restore(); 
 
     }); 
 
    } 
 
    } 
 
}); 
 

 

 
var q1 = document.getElementById("q1").getContext('2d'); 
 
var q1Chart = new Chart(q1, { 
 
    type: 'bar', 
 
    data: { 
 
    labels: ["Very Good(9-10)", "Good(8-7)", "OK(5-6)", "Bad (3-4)", "Cant be worse (0-2)"], 
 
    datasets: [{ 
 
     label: "Our Performance", 
 
     data: [19.56, 37.90, 1.29, 30.36, 10.89], 
 
     backgroundColor: ["#d93030", "#288fba", "#367fa9", "#367fa9", "#367fa9"], 
 
     datalabels: { 
 
     align: 'top', 
 
     anchor: 'end', 
 
     font: { 
 
      size: 18, 
 
      weight: 900, 
 
     }, 
 
     formatter: function (value) { 
 
      var label = value; 
 
      var keys, klen, k; 
 
      return label + '%'; 
 
     } 
 
     } 
 
    }] 
 
    }, 
 
    scaleLineColor: "rgba(0,0,0,1)", 
 
    options: { 
 
    scales: { 
 
     xAxes: [{ 
 
     color: 'yellow', 
 
     barThickness: 100, 
 
     ticks: { 
 
      fontColor: "black", 
 
      fontSize: 20, 
 
      autoSkip: false, 
 
     }, 
 
     gridLines: { 
 
      display: false 
 
     } 
 
     }], 
 
     yAxes: [{ 
 
     color: 'yellow', 
 
     barThickness: 150, 
 
     ticks: { 
 
      fontColor: "black", 
 
      fontSize: 20, 
 
      beginAtZero: true, 
 
      stepSize: 10 
 
     }, 
 
     gridLines: { 
 
      display: false 
 
     } 
 
     }], 
 
    }, 
 
    responsive: true, 
 
    maintainAspectRatio: true, 
 
    legend: { 
 
     display: false 
 
    }, 
 
    tooltips: { 
 
     enabled: false 
 
    }, 
 
    layout: { 
 
     padding: { 
 
     left: 0, 
 
     right: 0, 
 
     top: 30, 
 
     bottom: 0 
 
     } 
 
    } 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.js"></script> 
 
<canvas id="q1" height=""></canvas>