Chart.js如何使用脚本选项

问题描述

我正在按照迁移指南将chart.js迁移到3.x。
https://www.chartjs.org/docs/master/getting-started/v3-migration/

我正在尝试将xAxis zeroLineColor设置为“ #FFFFFF”，并且我希望将网格线颜色设置为“＃00FFFF”，但要根据chart.js迁移文档文档scales.[x/y]Axes.zeroLine* options of axes were removed. Use scriptable scale options instead。

我不确定如何使用可脚本化的缩放选项将xAxis线零设置为白色。

更新：
工作示例：
https://jsfiddle.net/g4vq7o2b/2/

解决方法

为了获得网格零线的不同颜色，可以为选项gridLines.color定义颜色数组。

gridLines: {
  drawBorder: false,color: ["#FFFFFF","#00FFFF","#00FFFF"]
}

由于gridLines.color是scriptable options，因此它还接受一个函数，该函数用context参数为每个基础数据值调用，如下所示：

gridLines: {
  drawBorder: false,color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
}

请查看下面的可运行代码，并查看其工作原理。

new Chart(document.getElementById("myChart"),{
  type: "line",data: {
    labels: ["January","February","March","April","May","June","July"],datasets: [{
      label: "My Dataset",data: [2,3,1,4,2,2],fill: false,backgroundColor: "rgba(0,255,0.3)",borderColor: "rgb(0,0)"
    }]
  },options: {
    scales: {
      y: {
        min: 0,ticks: {
          stepSize: 1
        },gridLines: {
          drawBorder: false,color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
        }
      },x: {
        gridLines: {
          drawBorder: false,color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF"
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta/chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>