如何更改 Chart.js 中特定 y 轴的颜色？

Question

我正在与

Chart.js

一起创建一个折线图，显示两个具有不同 y 轴的数据集。我想更改其中一个 y 轴的颜色，x 轴包含从 1 开始的测试编号，因此 x 轴上的第一个刻度为 1，最后一个刻度随我使用而变化

autoSkip 

和

maxTicksLimit

所以有时最后的刻度不在第二个 y 轴上

const rootStyles = getComputedStyle(document.documentElement);
    const mainColor = rootStyles.getPropertyValue('--main-color');
    const subColor = rootStyles.getPropertyValue('--sub-color');
    const data = {
        labels: [] as number[],
        datasets: [
            {
                label: 'WPM',
                data: [] as number[],
                fill: true,
                backgroundColor: mainColor,
                borderColor: mainColor,
                lineTension: 0.4,
                yAxisID: 'y',
            },
            {
                label: 'Accuracy',
                data: [] as number[],
                fill: true,
                backgroundColor: subColor,
                borderColor: subColor,
                lineTension: 0.4,
                yAxisID: 'y1',
            },
        ],
    };

    const options: any = {
        tooltips: {
            enabled: true,
            mode: 'label',
        },
        bezierCurve: true,
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                position: 'top',
                display: false,
                labels: {
                    usePointStyle: true,
                    font: {
                        size: 14,
                        family: 'lexend, sans-serif',
                    },
                },
            },
            title: {
                display: false,
            },
        },
        interaction: {
            intersect: false,
        },
        scales: {
            x: {
                title: {
                    display: true,
                    text: 'Test',
                    color: subColor,
                    font: {
                        size: 16,
                        family: 'lexend, sans-serif',
                    },
                },
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 10,
                    font: {
                        family: 'lexend, sans-serif',
                    },
                    color: subColor
                },
                grid: {
                    color: (context: any) => {
                        if (context.tick.value === data.labels[data.labels.length - 2] // here is the problem
                           || context.tick.value === 0)
                        {
                            return subColor
                        }
                        else {
                            return subColor + "15"
                        }
                    },
                },
            },
            y: {
                min: 0,
                max: Math.max(...wpmData) > 150 ? 290 : 200,
                position: 'left',
                title: {
                    display: true,
                    text: 'Words per minute',
                    color: subColor,
                    font: {
                        size: 16,
                        family: 'lexend, sans-serif',
                    },
                },
                ticks: {
                    font: {
                        family: 'lexend, sans-serif',
                    },
                    color: subColor,

                },
                grid: {
                    color: (context: any) => {
                        if (context.tick.value === 0) {
                            return subColor
                        }
                        else {
                            return subColor + "15"
                        }
                    },
                },
            },
            y1: {
                position: 'right',
                max: 120,
                min: 0,
                title: {
                    display: true,
                    text: 'Accuracy',
                    color: subColor,
                    font: {
                        size: 16,
                        family: 'lexend, sans-serif',
                    },
                },
                ticks: {
                    font: {
                        family: 'lexend, sans-serif',
                    },
                    color: subColor,
                },
                grid: {
                    color: (context: any) => {
                        if (context.tick.value === 0) {
                            return subColor
                        }
                        else {
                            return "transparent"
                        }
                    },
                },
            },
        },
        elements: {
            point: {
                radius: 2,
            },
        },

注意我不想给

gridLines

上色

当前

期待

Answer 1

假设您使用的是 Chart.js 4，您可以在比例配置中使用

border

节点。

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['1', '2', '3', '4', '5', '6', '7'],
    datasets: [{
      label: 'Sales',
      data: [12, 19, 3, 5, 2, 3, 14],
      borderWidth: 3,
      yAxisID: 'y'
    }, {
      label: 'Purchases',
      data: [10, 40, 30, 1, 1, 13, 8],
      borderWidth: 3,
      yAxisID: 'y1'
    }],
  },
  options: {
    scales: {
      x: {
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      },
      y: {
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      },
      y1: {
        position: 'right',
        ticks: {
          color: 'red'
        },
        grid: {
          display: false
        },
        border: {
          color: 'red',
        }
      }
    },
  },
});

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://npmcdn.com/chart.js@latest/dist/chart.umd.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

编辑：如果您希望所有图表实例都使用相同的颜色，您还可以考虑在图表默认值中设置 borderColor：

Chart.defaults.borderColor = 'red';