0

我想显示带有注释的折线图（从 x 轴开始的线到图上悬停的值），如图所示： 注释折线图示例

我已遵循本教程：https ://www.youtube.com/watch?v=pHx4SzlsAbk&ab_channel=SeanKelly ，我的图表选项如下：

const options = {
        responsive: true,
        lineHeightAnnotation: {
            color: "#000",
            shadow: true,
            always: true,
            hover: true,
            lineWeight: 1.5,
            noDash: true
        },
        maintainAspectRatio: false,
        title: {
            display: true,
            text: "Chart Title"
        },
        plugins: {
            legend: legend,
        },
        scales: {
            x: {
                grid: {
                    borderDash: [8, 4],
                    drawBorder: false,
                    display: false,
                },
            },

            y: {
                beginAtZero: true,
                ticks: {
                    callback: function (label: string | number) {
                        return label + '%';
                    },
                    min: 0,
                    max: 100,
                    stepSize: 25
                }
            }
        }
    };

结果： 结果图像

在尝试了很多解决方案之后，我认为 react-chartjs-2 版本 3 的插件存在问题。我还在我的 App.js 中注册了这样的插件（起点）：


import { Chart } from "chart.js";
import annotationPlugin from "chartjs-plugin-lineheight-annotation";
...
let namedChartAnnotation = annotationPlugin;
namedChartAnnotation["id"]="lineHeightAnnotation";
Chart.register([namedChartAnnotation]);

另外，我使用的 typescript (tsx) 文件不是起始文件 App.js。

版本：

"chartjs-plugin-lineheight-annotation": "^0.3.5",
"typescript": "^4.3.4",
"react-chartjs-2": "^3.0.3",
"chart.js": "^3.4.1",

有没有其他解决方案或我做错了什么？

4

0 回答 0