为数据点显示错误的工具提示

问题描述 投票:0回答:0

我有两个 y 轴,问题出在第二个 y 轴:这些点出现在图中的正确位置,但只有当我将鼠标悬停在 x 轴的前两个点上时,才会出现带有相应数据的工具提示.我已将

showLine
属性设置为 false,因为我希望它是散点图。所以我没有传递 x 轴上所有点的数据。这是数据:

[{x: 7, y: 4},
{x: 18, y: 1}]

const data = {
        labels: [] as number[],
        datasets: [
            {
                label: 'Words Per Minute',
                data: [] as number[],
                fill: true,
                backgroundColor: mainColor,
                borderColor: mainColor,
                borderWidth: 3,
                lineTension: 0.4,
                yAxisID: 'y',
            },
            {
                label: 'Incorrect Characters',
                data: [] as any[],
                fill: true,
                borderColor: function (context: any) {
                    const dataPoint = context.dataset.data[context.dataIndex];
                    if (dataPoint && dataPoint.hasOwnProperty('y') && dataPoint.y === 0) {
                        return 'transparent';
                    } else {
                        return errorColor;
                    }
                },
                backgroundColor: function (context: any) {
                    const dataPoint = context.dataset.data[context.dataIndex];
                    if (dataPoint && dataPoint.hasOwnProperty('y') && dataPoint.y === 0) {
                        return 'transparent';
                    } else {
                        return errorColor;
                    }
                },
                borderWidth: 3,
                pointRadius: 4,
                pointHoverRadius: 8,
                showLine: false,
                yAxisID: 'y1',
                pointStyle: 'cross'
            },
        ],
    };

y轴代码

y1: {
                position: 'right',
                title: {
                    display: true,
                    text: 'Incorrect Characters',
                    color: subColor,
                    font: {
                        size: 16,
                        family: 'lexend, sans-serif',
                    },
                },
                ticks: {
                    autoSkip: true,
                    maxTicksLimit: 5,
                    precision: 0,
                    font: {
                        family: 'lexend, sans-serif',
                    },
                    color: subColor,
                    callback: function (value: any, index: number, values: string | any[]) {
                        if (incorrectChars.length !== 0) {
                            return value;
                        } else {
                            if (index === values.length - 1) return 1;
                            else if (index === 0) return 0;
                            else return '';
                        }
                    }
                },
                grid: {
                    color: "transparent"
                },
                border: {
                    color: subColor
                }
            },
chart.js
© www.soinside.com 2019 - 2024. All rights reserved.