Charts ChartJs-设置刻度之间空间的背景色

我需要设置背景色之间的偶数/奇数间隔，如下图所示

请参见“交错颜色”背景色。我需要对垂直和水平图形都这样做

例如，见：

关于如何在chart js中实现类似的东西，有什么想法吗

我在这里也找到了一个几乎不错的解决方案：

1） HTML代码：

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

2） Javascript代码：

    Chart.pluginService.register({
        beforeDraw: function (chart, easing) {
            if (chart.config.options.chartArea && chart.config.options.chartArea.backgroundColor) {
                var helpers = Chart.helpers;
                var ctx = chart.chart.ctx;
                var chartArea = chart.chartArea;

      var columnCount = chart.data.datasets[0].data.length;
      var width = chartArea.right - chartArea.left;
      var height = chartArea.bottom - chartArea.top

                var columnWidth = width/columnCount;
                ctx.save();
                ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
      var startPoint = chartArea.left
      for (var i = 1; i < width/2; i++) {
        ctx.fillRect(startPoint, chartArea.top, columnWidth, height);
        startPoint += columnWidth * 2;
      }
                ctx.restore();
            }
        }
    });

    var config = {
        type: 'line',
        data: {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [{
                label: "My First dataset",
                data: [65, 0, 80, 81, 56, 85, 40],
                fill: false
            }]
        },
        options: {
            chartArea: {
                backgroundColor: 'rgba(251, 85, 85, 0.4)'
            }
        }
    };

    var ctx = document.getElementById("myChart").getContext("2d");
    new Chart(ctx, config);

Chart.pluginService.register({
绘制前：功能（图表、缓和）{
if（chart.config.options.chartArea&&chart.config.options.chartArea.backgroundColor）{
var helpers=Chart.helpers；
var ctx=chart.chart.ctx；
var chartArea=chart.chartArea；
var columnCount=chart.data.datasets[0].data.length；
var宽度=chartArea.right-chartArea.left；
变量高度=chartArea.bottom-chartArea.top
var columnWidth=宽度/列数；
ctx.save（）；
ctx.fillStyle=chart.config.options.chartArea.backgroundColor；
var startPoint=chartraea.left
对于（变量i=1；i

---

谢谢。

您需要调整基于自己的示例，以使用高度而不是宽度

我只是简单地更改了属性和坐标来绘制矩形，它就可以工作了

Chart.pluginService.register({
绘制前：功能（图表、缓和）{
if（chart.config.options.chartArea&&chart.config.options.chartArea.backgroundColor）{
var helpers=Chart.helpers；
var ctx=chart.chart.ctx；
var chartArea=chart.chartArea；
var values=chart.data.dataset[0].data；//已添加
//var columnCount=chart.data.datasets[0].data.length；
var rowCount=Math.ceil（Math.max.apply（null，values）/10）；//替换为所需的行数
var宽度=chartArea.right-chartArea.left；
变量高度=chartArea.bottom-chartArea.top
//var columnWidth=宽度/列数；
var rowHeight=height/rowCount；//已添加
ctx.save（）；
ctx.fillStyle=chart.config.options.chartArea.backgroundColor；
var startPoint=chartArea.top//已更改
而（startPoint

您需要调整基于自己的示例，以使用高度而不是宽度

我只是简单地更改了属性和坐标来绘制矩形，它就可以工作了

Chart.pluginService.register({
绘制前：功能（图表、缓和）{
if（chart.config.options.chartArea&&chart.config.options.chartArea.backgroundColor）{
var helpers=Chart.helpers；
var ctx=chart.chart.ctx；
var chartArea=chart.chartArea；
var values=chart.data.dataset[0].data；//已添加
//var columnCount=chart.data.datasets[0].data.length；
var rowCount=Math.ceil（Math.max.apply（null，values）/10）；//替换为所需的行数
var宽度=chartArea.right-chartArea.left；
变量高度=chartArea.bottom-chartArea.top
//var columnWidth=宽度/列数；
var rowHeight=height/rowCount；//已添加
ctx.save（）；
ctx.fillStyle=chart.config.options.chartArea.backgroundColor；
var startPoint=chartArea.top//已更改
而（startPoint

您的解决方案不是我所需要的。我希望能够为每个奇偶线设置背景。在Y刻度上，0到10之间为颜色（颜色a），10到20之间为不同颜色（颜色b），20到30之间为颜色a，30到40之间为颜色