ChartJS将阴影颜色添加到网格和自定义x轴标签

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      y: {
        grid: {
          color: 'rgba(0, 0, 0, 0)', // 设置网格线颜色为透明
          borderDash: [5, 5], // 设置网格线为虚线样式
          drawBorder: false, // 不绘制网格边框
          drawTicks: false // 不绘制网格刻度线
        }
      },
      x: {
        grid: {
          color: 'rgba(0, 0, 0, 0)', // 设置网格线颜色为透明
          borderDash: [5, 5], // 设置网格线为虚线样式
          drawBorder: false, // 不绘制网格边框
          drawTicks: false // 不绘制网格刻度线
        }
      }
    }
  }
});

// 添加网格阴影样式
var gridElement = chart.chartArea;
gridElement.style.boxShadow = '0px 0px 10px rgba(0, 0, 0, 0.1)';

var chart = new Chart(ctx, {
  type: 'bar',
  data: data,
  options: {
    plugins: {
      beforeDraw: function(chart) {
        var ctx = chart.ctx;
        var xAxis = chart.scales['x-axis-0'];
        var labels = xAxis.ticks;

        ctx.save();

        // 设置阴影颜色
        ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';

        // 遍历x轴标签
        labels.forEach(function(label, index) {
          // 获取标签的位置
          var xPos = xAxis.getPixelForTick(index);

          // 绘制阴影矩形
          ctx.fillRect(xPos - 5, chart.chartArea.bottom, 10, 5);
        });

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