ChartJs 中的可调整大小/可消耗框注释

Question

我使用chartjs-插件的注释中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

Answer 1

是的，您可以深入了解图表对象的选项部分，调整注释的配置，然后调用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>

ChartJs 中的可调整大小/可消耗框注释

问题描述

1 个解决方案

解决方案1
1 2021-06-30 10:26:01

ChartJs 中的可调整大小/可消耗框注释

问题描述

1 个解决方案

解决方案1 1 2021-06-30 10:26:01

解决方案1
1 2021-06-30 10:26:01