[英]vertical line annotation on horizontal bar in chart js react not showing
I have a horizontal single bar chart showing percentage inside of an ag-grid row, I would like to add a line at a certain percentage to show a target.我有一个水平单条形图,显示 ag-grid 行内的百分比,我想以一定百分比添加一条线来显示目标。 I am using the annotations plugin which is registered.
我正在使用已注册的注释插件。 I have tried several different versions of the annotation options but cannot get anything to show on the chart.
我尝试了几种不同版本的注释选项,但无法在图表上显示任何内容。 Any help would be greatly appreciated:)
任何帮助将不胜感激:)
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} />
</>
);
If I'm not wrong, there are some errors in chart configuration.如果我没记错的话,图表配置有一些错误。
plugin
is not the correct node name but is plugins
plugin
不是正确的节点名称,而是plugins
x
scale which is not defined, because you defined xAxes
.x
比例有关,因为您定义xAxes
。 Furthermore it seems you are using CHART.JS 3 but the annotation plugin version 0.x.此外,您似乎使用的是 CHART.JS 3,但注释插件版本为 0.x。 From plugin README:
从插件自述文件:
For Chart.js 3.0.0 to 3.6.2 support, use version 1.4.0 of this plugin For Chart.js 2.4.0 to 2.9.x support, use version 0.5.7 of this plugin对于 Chart.js 3.0.0 到 3.6.2 支持,使用此插件的 1.4.0 版本 对于 Chart.js 2.4.0 到 2.9.x 支持,使用此插件的 0.5.7 版本
I have attached here a sample, fixing the config, using CHART.JS 3.9.1 and ANNOTATION 2.0.1:我在这里附上了一个示例,使用 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.