如何解决ChartJs 中的可调整大小/可消耗框注释
我在 chartjs-plugin-annotation 中使用 chartJs 和 ReactJs。但是在框注释中有一种方法可以调整框的大小，以便我可以使用注释的最小值，最大值。
我的选项代码：`
options: {
scales: {
y: {
beginAtZero: true
}
},plugins: {
autocolors: false,annotation: {
annotations: {
Box1: {
type: "Box",xMin: 1,xMax: 2,yMin: 5,yMax: 10,backgroundColor: "rgba(255,99,132,0.25)"
}
}
}
}
}
`
这是我的代码沙箱 ReactJs-ChartJs
解决方法
是的，您可以深入了解图表对象的选项部分，调整注释的配置，然后调用 chart.update() 这将更新注释。
示例：
const options = {
type: 'line',data: {
labels: ["Red","Blue","Yellow","Green","Purple","Orange"],datasets: [{
label: '# of Votes',data: [12,19,3,5,2,3],borderWidth: 1
}]
},options: {
plugins: {
annotation: {
annotations: {
box1: {
type: "box",xMin: 1,xMax: 2,yMin: 5,yMax: 10,backgroundColor: "rgba(255,99,132,0.25)"
}
}
}
}
}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx,options);
document.getElementById("tt").addEventListener("click",() => {
chart.options.plugins.annotation.annotations.box1.yMax = 16;
chart.update();
});
document.getElementById("rr").addEventListener("click",() => {
chart.options.plugins.annotation.annotations.box1.yMax = 8;
chart.update();
});<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<button id="tt">Update annotation to 16</button>
<button id="rr">Update annotation to 8</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.0.2/chartjs-plugin-annotation.js"></script>
</body>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。