Chart.js如何使用脚本选项

n53p2ov0  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(246)

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

abithluo

abithluo1#

使用chart_v3.7.0.js笛卡尔时间轴,对我来说,配置zeroline和其他网格线工作,使用脚本选项。应用属性为“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",                 }, 
                    },

            },
pbgvytdp

pbgvytdp2#

为了使网格的零线具有不同的颜色,可以为选项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"
}

请看下面的可运行代码,看看它是如何工作的。
第一个

相关问题