ChartJs - 设置刻度之间 space 的背景颜色

Question

我需要在刻度线之间设置 even/odd space 背景颜色，如下图所示；

查看 "Interlaced Colors" 背景颜色。我需要对垂直图和水平图都执行此操作。

参见示例：https://canvasjs.com/docs/charts/chart-options/axisY/interlacedcolor/

知道如何在图表 js 中实现类似的功能吗？

我在这里也找到了一个差不多好的解决方案：http://jsfiddle.net/e7oy6yk6/2

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);

谢谢。

Answer 1

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

我只是更改了绘制矩形的属性和坐标，它起作用了。

http://jsfiddle.net/e7oy6yk6/170/

    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 values = chart.data.datasets[0].data; // Added
          // var columnCount = chart.data.datasets[0].data.length;
          var rowCount = Math.ceil(Math.max.apply(null, values) / 10); // Replace by the number of rows you need

          var width = chartArea.right - chartArea.left;
          var height = chartArea.bottom - chartArea.top

          // var columnWidth = width/columnCount;
          var rowHeight = height / rowCount; // Added
          ctx.save();
          ctx.fillStyle = chart.config.options.chartArea.backgroundColor;
          var startPoint = chartArea.top // Changed
          while (startPoint < chartArea.bottom) { // Changed
            ctx.fillRect(chartArea.left, startPoint, width, rowHeight); // Changed order
            startPoint += rowHeight * 2; // Changed
          }
          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);

ChartJs - 设置刻度之间 space 的背景颜色

ChartJs - set background color of the space between ticks

charts

chart.js

chart.js2