如何更新Chartjs中的注释值3.7.1

Question

找到了一堆旧帖子，但在较新版本上找不到任何东西。我正在使用ChartJS 3.7.1和Chartjs-Plugin-nototation 1.4.0

我可以通过以下方式添加新的注释：

myChart.options.plugins.annotation.annotations['newAnnotation'] = {
  type: 'line',
 xMin: 0,
 xMax: 11,
 yMin: 200000,
 yMax: 200000,
 borderColor: 'rgb(255, 99, 132)',
 borderWidth: 2
 };

 myChart.update();

但是如何动态访问现有注释以便以后更改值？

尝试这样的事情不起作用：

myChart.options.plugins.annotation.annotations[0].value = 200000;

Answer 1

这可以如下完成：

const annotation = myChart.options.plugins.annotation.annotations.newAnnotation;
annotation.yMin = newValue;
annotation.yMax = newValue;
myChart.update();

请查看下面的可运行代码。要查看其工作原理，请在INPUT元素上键入图表顶部，然后按 Enter

const myChart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    datasets: [{
      label: 'My First Dataset',
      data: [65, 59, 80, 81, 56, 55, 40],
      fill: false,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    plugins: {
      autocolors: false,
      annotation: {
        annotations: {
          newAnnotation: {
            type: 'line',
            yMin: 60,
            yMax: 60,
            borderColor: 'rgb(255, 99, 132)',
            borderWidth: 2
          }
        }
      }
    }
  }
});

const input = document.getElementById('myInput');
input.addEventListener('keypress', event => {
  if (event.key === 'Enter') {
    event.preventDefault();
    const annotation = myChart.options.plugins.annotation.annotations.newAnnotation;
    annotation.yMin = input.value;
    annotation.yMax = input.value;
    myChart.update();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.min.js"></script>
<label for="salary">Enter new y-value and press enter:</label>
<input id="myInput" type="number">
<canvas id="myChart" height="90"></canvas>