我無法在 Chartjs 中配置插件 chartjs-plugin-annotation。
從檔案中，我安裝了 V 0.5.7，因為我使用的是 Chart.js V 2.9.4。
這是我的配置：
注冊插件：
import Chart from "chart.js";
import annotationPlugin from "chartjs-plugin-annotation";
Chart.plugins.register(annotationPlugin);
//Chart.pluginService.register(annotationPlugin); //also tried this but doesn't work
在這里選項配置（簡化），我還嘗試將“注釋”包裝在“插件”中，但它不起作用：
scales: {
yAxes: [
{
scaleLabel: {
...
},
ticks: {
...
},
gridLines: {
...
},
},
],
xAxes: [
{
gridLines: {
...
},
ticks: {
...
},
},
],
},
maintainAspectRatio: false,
legend: {
...
labels: {
...
},
},
tooltips: {
...
},
annotation: {
annotations: [
{
type: "line",
mode: "horizontal",
scaleID: "yAxes",
value: 2.62,
borderColor: "white",
borderWidth: 4,
},
],
},
hover: {
...
},
我究竟做錯了什么？
uj5u.com熱心網友回復：
看起來您正在嘗試實作注釋插件，就好像您要將其集成到當前的 chart.js 版本一樣。例如，您在plugins.
這是一個適用于給定版本的示例。請注意，我annotation立即在options提供所需注釋的內容中添加了物件。（在我的例子中以紅線的形式。）
import React, { useEffect, useRef } from "react";
import Chart from "chart.js";
import annotationPlugin from "chartjs-plugin-annotation";
Chart.pluginService.register(annotationPlugin);
const LineGraph = () => {
const chartRef = useRef(null);
useEffect(() => {
if (chartRef?.current) {
const chartToDraw = chartRef.current.getContext("2d");
new Chart(chartToDraw, {
type: "line",
data: {
labels: ["Jan", "Feb", "March"],
datasets: [
{
label: "Sales",
data: [86, 67, 91]
}
]
},
options: {
annotation: {
drawTime: "afterDatasetsDraw", // (default)
events: ["click"],
dblClickSpeed: 350, // ms (default)
annotations: [
{
drawTime: "afterDraw",
id: "a-line-1",
type: "line",
mode: "horizontal",
scaleID: "y-axis-0",
value: "25",
borderColor: "red",
borderWidth: 2
}
]
}
}
});
}
}, []);
return (
<div className={{ width: "100%", height: 500 }}>
<canvas id="myChart" ref={chartRef} />
</div>
);
};
export default LineGraph;
你可以看到它在這里作業：https : //codesandbox.io/s/chart-js-2-9-4-annotation-example-f3h7d?file=/src/LineGraph.js
0.5.7 的 Chart.js 插件注釋檔案：https ://www.chartjs.org/chartjs-plugin-annotation/0.5.7/
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/367830.html
標籤：反应 图表.js chartjs-插件-注解
下一篇：Django后端提供反應前端影像