Highcharts React：全屏模式打开时，菜单按钮不会从 "view full screen" 更改为 "exit full screen"

Question

我们在 React 中使用 highcharts 时遇到了一些问题。当我使用菜单按钮更改为全屏模式时，我看不到“退出全屏”选项。相反，该选项仍然是“全屏查看”......但是，如果我单击此选项，它实际上会退出全屏模式。我希望能够看到文本“退出全屏”。我认为问题在于在此代码的最后几行声明的事件 (exporting.chartOptions.chart)。

useEffect(() => {
        const chart = chartRef?.current?.chart;
        if (!chart?.renderer) return;

        setChartOptions(({ chart, credits, legend, xAxis, yAxis, plotOptions, ...currentOptions }) => ({
            ...currentOptions,
            chart: {
                ...chart,
                ...chartExtraOptions.current?.chart,
            },
            credits: {
                ...credits,
                position: {
                    ...credits?.position,
                    ...chartExtraOptions.current?.credits.position,
                },
            },
            legend: {
                ...legend,
                ...chartExtraOptions.current?.legend,
            },
            xAxis: {
                ...xAxis,
                ...chartData?.xAxis,
                title: { text: undefined },
                plotLines: [
                    {
                        value: ((chartData?.xAxis?.max ?? 0) + (chartData?.xAxis?.min ?? 0)) / 2,
                        color: "#84acbc",
                    },
                ],
            },
            yAxis: {
                ...yAxis,
                ...chartData?.yAxis,
                title: { text: undefined },
                plotLines: [
                    {
                        value: ((chartData?.yAxis?.max ?? 0) + (chartData?.yAxis?.min ?? 0)) / 2,
                        color: "#84acbc",
                    },
                ],
            },
            series: chartData?.series,
            exporting: {
                chartOptions: {
                    chart: {
                        events: {
                            load: function (this) {
                                chartAxesTitles.current.forEach((element) => {
                                    const { args, attr, css } = element.svg.userOptions;
                                    // Use updated x and y positions
                                    const newArgs = [args[0], element.svg.x, element.svg.y];
                                    createLabel(this.renderer, { args: newArgs, attr, css });
                                    renderWatermarkLabels(this, true);
                                });
                                // console.log(this);
                            },
                        },
                    },
                },
            },

但我不知道为什么！！！有任何想法吗？谢谢！

我添加了图表配置以防有帮助：

import { WATERMARK } from "constants/chartCommons";

export const OPTIONS: Highcharts.Options = {
    chart: {
        className: "IndividualPositioningChart",
        type: "scatter",
        spacing: [0, 0, 0, 0],
    },
    credits: {
        text: WATERMARK,
        href: "#",
        position: {
            align: "left",
        },
        style: {
            fontSize: "8px",
        },
    },
    title: {
        text: undefined,
    },
    xAxis: {
        startOnTick: false,
        lineWidth: 0,
        tickColor: "transparent",
        gridLineColor: "transparent",
        labels: {
            enabled: false,
        },
    },
    yAxis: {
        gridLineColor: "transparent",
        labels: {
            enabled: false,
        },
    },
    legend: {
        verticalAlign: "bottom",
        itemWidth: 150,
        margin: 20,
    },
    tooltip: {
        snap: 1,
        enabled: true,
        backgroundColor: "black",
        borderWidth: 0,
        borderRadius: 2,
        padding: 4,
        shadow: false,
        useHTML: true,
        style: {
            color: "white",
            fontSize: "11px",
        },
        headerFormat: undefined,
    },
    plotOptions: {
        series: {
            dataLabels: {
                enabled: true,
                y: 13,
                x: 8,
                align: "left",
                useHTML: true,
                padding: 5,
                style: {
                    fontWeight: "normal",
                    fontSize: "14px",
                    color: "#515151",
                    width: 250,
                },
            },
            stickyTracking: false,
        },
    },
    series: [],
};

Answer 1

最后，我解决了从 useEffect 挂钩中删除加载事件的问题。 load 事件现在在图表配置文件中声明，并作为参数传递给 getOption 函数。它看起来像这样：

export const getOption = (load: Highcharts.ChartLoadCallbackFunction): Highcharts.Options => {
    return {
        chart: {
            className: "TeamCompetitiveChart",
            spacing: [0, 0, 0, 0],
            type: "scatter",
        },
        credits: {
            text: WATERMARK,
            href: "#",
            position: {
                align: "left",
            },
            style: {
                fontSize: "8px",
            },
        },
        title: {
            text: undefined,
        },
        xAxis: {
            title: undefined,
            startOnTick: false,
            lineWidth: 0,
            tickColor: "transparent",
            gridLineColor: "transparent",
            labels: {
                enabled: false,
            },
        },
        yAxis: {
            title: undefined,
            gridLineColor: "transparent",
            labels: {
                enabled: false,
            },
        },
        legend: {
            verticalAlign: "bottom",
            itemWidth: 150,
            margin: 20,
        },
        tooltip: {
            enabled: false,
        },
        plotOptions: {
            series: {
                marker: {
                    radius: 8,
                },
                dataLabels: {
                    enabled: true,
                    y: 13,
                    x: 8,
                    align: "left",
                    useHTML: true,
                    padding: 5,
                    style: {
                        fontWeight: "normal",
                        fontSize: "14px",
                        color: "#515151",
                        width: 250,
                    },
                },
                stickyTracking: false,
                point: {
                    events: {
                        click: undefined,
                    },
                },
            },
        },
        series: [],
        exporting: {
            chartOptions: {
                chart: {
                    events: {
                        load,
                    },
                },
            },
        },
    };
};

...这在钩子上：

const chartAxesTitles = useRef<IChartAxisTitle[]>([]);
const chartRef = useRef<IRefObjectForHighchartsReact>(null);

const load: Highcharts.ChartLoadCallbackFunction = function (this: Highcharts.Chart) {
        chartAxesTitles.current.forEach((element: IChartAxisTitle) => {
            const { args, attr, css } = element.svg.userOptions;
            // Use updated x and y positions
            const newArgs = [args[0], element.svg.x, element.svg.y];
            createLabel(this.renderer, { args: newArgs, attr, css });
            renderWatermarkLabels(this, true);
        });
    };

const [chartOptions, setChartOptions] = useState<Highcharts.Options>(getOption(load));

const { renderWatermarkLabels } = useRenderWatermarkLabels(chartData);

Highcharts React：全屏模式打开时，菜单按钮不会从 "view full screen" 更改为 "exit full screen"

Highcharts React: Menu button doesn´t change from "view full screen" to "exit full screen" when fullscreen mode is on

javascript

reactjs

typescript

highcharts

react-highcharts