圖表js中水平條上的垂直線注釋反應不顯示

Question

我有一個水平單條形圖，顯示 ag-grid 行內的百分比，我想以一定百分比添加一條線來顯示目標。 我正在使用已注冊的注釋插件。 我嘗試了幾種不同版本的注釋選項，但無法在圖表上顯示任何內容。 任何幫助將不勝感激：）

const options = {
    indexAxis: 'y' as const,
    responsive: true,
    scales: {
        xAxis: {
            max: 100,
            min: 0,
            display: false,
        },
        yAxis: {
            display: false,
        },
    },
    plugin: {
        annotation: {
            annotations: [
                {
                    type: 'line' as const,
                    mode: 'vertical',
                    scaleID: 'x',
                    value: 80,
                    borderColor: 'black',
                    borderWidth: 2,
                },
            ],
        },
    },
};

    const dataset = {
        labels: ['In-session utilisation (%)'],
        datasets: [
            {
                id: 1,
                label: '',
                data: [theatreUtilisation],
                backgroundColor: theme.color.accentB,
            },
        ],
    };

    return (
        <>
            <Bar data={dataset} options={options} />
        </>
    );

Answer 1

如果我沒記錯的話，圖表配置有一些錯誤。

1. plugin不是正確的節點名稱，而是plugins
2. 插件注釋與未定義的x比例有關，因為您定義xAxes 。

此外，您似乎使用的是 CHART.JS 3，但注釋插件版本為 0.x。 從插件自述文件：

對於 Chart.js 3.0.0 到 3.6.2 支持，使用此插件的 1.4.0 版本 對於 Chart.js 2.4.0 到 2.9.x 支持，使用此插件的 0.5.7 版本

我在這里附上了一個示例，使用 CHART.JS 3.9.1 和 ANNOTATION 2.0.1 修復配置：

 const ctx = document.getElementById("myChart"); const myChart = new Chart(ctx, { type: 'bar', data: { labels: ['January', 'Fabruary', 'March', 'April', 'May', 'June', 'July'], datasets: [{ label: 'user 1 online', data: [50, 35, 45, 47, 10, 3, 27], backgroundColor: 'rgba(40, 139, 170, 1)', borderWidth: 0, borderSkipped: false, }] }, options: { indexAxis: 'y', scales: { y: { display: true, }, x: { max: 100, min: 0, display: true, } }, plugins: { annotation: { annotations: [ { type: 'line', scaleID: 'x', value: 80, borderColor: 'black', borderWidth: 2, }, ], }, }, }, });

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

 <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@2.0.1/dist/chartjs-plugin-annotation.min.js"></script> <div class="myChartDiv"> <canvas id="myChart" width="600" height="400"></canvas> </div>