1

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

4

2 回答 2

2

为了获得网格零线的不同颜色，您可以为 option 定义一个颜色数组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>

于 2020-09-20T13:57:17.393 回答
0

对我来说，使用 chart_v3.7.0.js 笛卡尔时间轴，配置零线和其他网格线可以使用脚本选项。为“context.tick.value == 0”（=baseline）应用属性，例如：...

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",                 }, 
                    },
                                        
            },
于 2022-02-11T22:15:00.180 回答