如何使用 Chart.js 和 Annotation 更改图表网格中特定区域的背景颜色？

问题描述

我在尝试更改两个 yAxis 刻度之间的特定图表区域的 backgroundColor 时遇到了一些麻烦。这就是我目前所拥有的：

这就是我想要的：

我看过一些关于此的类似帖子，人们建议使用 Annotation 来执行此操作。我尝试在我的图表上使用它，但没有用。这是我第一次使用 chart.js 构建图表，所以我仍在学习。这是我的代码：

var profileChart = new Chart(ctx1,{
type: "line",data: {
    labels: ["","D","I","S","C",""],datasets:[{
        data: [],borderWidth: 1,pointBackgroundColor: "black",backgroundColor: "black",borderColor: "black",fill: false,lineTension: 0,yAxisID: 'first-y-axis'
    },{
        yAxisID: 'third-y-axis'
    }],},options: {
    title: {
        display: true,text: 'Gráfico do Perfil disC',fontSize: 20,scales: {
        yAxes: [{
            id: 'first-y-axis',type: 'linear',gridLines: {
                drawOnChartArea: false
            },scaleLabel: {
                display: true,padding: '15px',labelString: 'Intensity'
              },ticks: {
                max: 28,min: 1,stepSize: 1
            }
        },{
            id: 'second-y-axis',position: 'left',gridLines: {
                drawOnChartArea: true
            },ticks: {
                display: false,max: 8,{
            id: 'third-y-axis',position: 'right',padding: '10px',labelString: 'Segment'
              },ticks: {
                max: 7.5,min: 0.5,stepSize: 1
            },afterTickToLabelConversion: function(scaleInstance) {
                scaleInstance.ticks[0] = null;
                scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
                scaleInstance.ticksAsNumbers[0] = null;
                scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
              },}] 
    },legend: {
        display: false
    },tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
},annotation: {
    drawTime: "afterDraw",annotations: [{
        id: 'Box1',type: 'Box',yScaleID: 'second-y-axis',yMin: 12.5,yMax: 16.5,backgroundColor: 'grey',}]
  }
});

解决方法

您可以使用 Plugin Core API 直接在画布上绘制矩形。 API 提供了一系列可用于执行自定义代码的钩子。

在下面修改后的代码中，我使用 beforeDraw 钩子通过 CanvasRenderingContext2D.fillRect() 绘制矩形。

var profileChart = new Chart('canvas',{
  type: "line",plugins: [{
    beforeDraw: chart => {
      var ctx = chart.chart.ctx;
      var xAxis = chart.scales['x-axis-0'];
      var yAxis = chart.scales['first-y-axis'];       
      ctx.save();            
      ctx.fillStyle  = 'lightgray';
      ctx.beginPath();    
      var yTop = yAxis.getPixelForValue(16.5);
      var yBottom = yAxis.getPixelForValue(12.5);
      ctx.fillRect(xAxis.left,yTop,xAxis.right - xAxis.left,yBottom - yTop);
      ctx.stroke();            
      ctx.restore();
    }
  }],data: {
    labels: ["","D","I","S","C",""],datasets: [{
        data: [,25.5,8,7.5,11],borderWidth: 1,pointBackgroundColor: "black",backgroundColor: "black",borderColor: "black",fill: false,lineTension: 0,yAxisID: 'first-y-axis'
      },{
        yAxisID: 'third-y-axis'
      }
    ],},options: {
    title: {
      display: true,text: 'Gráfico do Perfil DISC',fontSize: 20,scales: {
      yAxes: [{
          id: 'first-y-axis',type: 'linear',gridLines: {
            drawOnChartArea: false
          },scaleLabel: {
            display: true,padding: '15px',labelString: 'Intensity'
          },ticks: {
            max: 28,min: 1,stepSize: 1
          }
        },{
          id: 'second-y-axis',position: 'left',gridLines: {
            drawOnChartArea: true
          },ticks: {
            display: false,max: 8,{
          id: 'third-y-axis',position: 'right',padding: '10px',labelString: 'Segment'
          },ticks: {
            max: 7.5,min: 0.5,stepSize: 1
          },afterTickToLabelConversion: function(scaleInstance) {
            scaleInstance.ticks[0] = null;
            scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
            scaleInstance.ticksAsNumbers[0] = null;
            scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
          },}
      ]
    },legend: {
      display: false
    },tooltips: {
      callbacks: {
        label: function(tooltipItem) {
          return tooltipItem.yLabel;
        }
      }
    }
  }
});

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