Chart.js如何使用可编写脚本的选项

Question

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

我正试图将xAxis zeroLineColor设置为"#FFFFFF"；并且我希望网格线的颜色为"绿色"#00FFFF"；但是根据chart.js迁移文档文档CCD_ 1。

我不知道如何使用可编写脚本的缩放选项将xAxis线零设置为白色。

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

Answer 1

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

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

由于gridLines.color是一个可编写脚本的选项，它还接受一个函数，该函数是用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>

Answer 2

对我来说，使用chart_v3.7.0.js笛卡尔时间轴，使用可脚本化选项配置零线和其他网格线是可行的。应用"的属性；context.tick.value＝＝0"；(=基线(比如：…

options: { 
scales: {

x: {    
gridLines: {
color: "#00ff00",
},
ticks: {        font: { size: 30    },
maxRotation: 90,
minRotation: 90,
},
type: 'time',       
time: {
/*tooltipFormat: "DD.MM hh:mm",*/
displayFormats: {
minute: 'HH:mm',
hour: 'HH:mm',
day: 'dd.MMM',
}
},
},

y: {    
grid: {
color: (line) => (line.index === 0 ? 'red' : 'rgba(0, 0, 0, 0.1)') //color of lowest horizontal grid line
color: context => context.tick.value == 0 ? "#FFFFFF" : "#00FFFF", // zero-line baseline color
lineWidth: context => context.tick.value == 0 ? 3 : 1, // zero-line baseline width
},
position: 'right', // show axis on the right
title: {        display: true,
rotation: 0,
text: "°C",                 }, 
},

},