Chart.js 如何使用脚本选项答案

【问题标题】：Chart.js how to use scriptable optionsChart.js 如何使用脚本选项
【发布时间】：2021-01-06 15:32:44
【问题描述】：

我正在按照迁移指南将 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/

【问题讨论】：

标签： chart.js chart.js2 chart.js3

【解决方案1】：

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

gridLines: {
  drawBorder: false,
  color: ["#FFFFFF", "#00FFFF", "#00FFFF", "#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, 4, 2],
      fill: false,
      backgroundColor: "rgba(0, 255, 0, 0.3)",
      borderColor: "rgb(0, 255, 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>

【讨论】：

谢谢，我有scatter 图表，但我无法按照描述的那样工作。我们还需要将 yAxis 刻度 0 设置为“#FFFFFF”颜色以将 xAxis 零线颜色设置为“#FFFFFF”吗？
@User7723337：你能发布你的代码的可运行版本吗？
使用工作示例更新问题。我只需要为 xAxis 显示网格线，网格线和零线的颜色不同。此外，yAxis 刻度线颜色与 yAxis 零线颜色不同。请参阅工作示例。 jsfiddle.net/g4vq7o2b/2
@User7723337：显然网格零线的颜色也是通过gridLines.color控制的（见chartjs.org/samples/master/scales/gridlines-scriptable.html）。我想我回答了您最初的问题，即“如何使用可编写脚本的选项？”。