如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。