Chart.js 无法在 Preact + Typescript 中更新 fontSize

如何解决Chart.js 无法在 Preact + Typescript 中更新 fontSize

在没有运气的情况下从 Chart.js 的 github 中吸取各种帖子并阅读版本历史后，我想我会把它扔给 hivemind。

使用： "preact": "^10.3.1",“打字稿”：“^4.1.5” "chart.js": "^2.9.4","@types/chart.js": "^2.9.30",

我可以在所有地方访问 fontSize 属性（就 VScode 而言），包括嵌套在 ticks.minor 和 ticks.major 中；

 chartToUpdate.options.scales?.yAxes?[0].ticks?.

const scaleAxes = chartToUpdate?.options?.scales?.xAxes;
const axesXTicks = scaleAxes && scaleAxes[0]?.ticks;
if (axesXTicks) {
    axesXTicks.minor = axesXTicks.major = {
        fontSize: 20
    };
}

chartToUpdate.update();

但是，我在这里所做的任何更改都不起作用。我试过运行 chart.update() 如下，但也无济于事。

 const barChart = document.getElementById("barChart");

有没有其他人遇到过这个问题，并找到了解决方法？我只是无法更新字体大小。任何帮助表示赞赏！

我曾尝试在 JSfiddle 上进行复制，但是为了在我的项目中使用 Typescript，有一点不同；第一个 const 声明后跟“ as HTMLCanvasElement”。

if (barChart !== null) {
    if (typeof myBarChart != "undefined") {
        myBarChart.destroy();
    }
    // myBarChart = generateBarChart(barChart,answerHeaders,answerValues);

    const ctx = barChart.getContext("2d") ? barChart.getContext("2d") : null;

    myBarChart = new Chart(barChart,{
        type: "bar",data: {
            labels: answerHeaders,datasets: [
                {
                    label: "Seconds",data: answerValues,backgroundColor: "#439c35",borderColor: "#4a4a4a",borderWidth: 1,fill: "none",lineTension: 0.1
                }
            ]
        },options: {
            responsive: true,maintainAspectRatio: true,legend: {
                position: "bottom",display: false
            },title: {
                display: false,text: "Question Response Time"
            },scales: {
                yAxes: [
                    {
                        ticks: {
                            beginAtZero: true,suggestedMax: Math.max(...answerValues) + 1,fontSize: 30
                        },scaleLabel: {
                            display: true,labelString: "Seconds",fontSize: 40
                        }
                    }
                ],xAxes: [
                    {
                        ticks: {
                            minor: {
                                fontSize: 20
                            },major: {
                                fontSize: 20
                            }
                        }
                    }
                ]
            }
        }
    });
}

const answerHeaders = ["Red","Blue","Yellow","Green","Purple","Orange"];

const answerValues = [12,19,3,5,2,3];

bundle exec fastlane run update_fastlane

开发结果（带有开发数据和自定义渐变）：