Chart.js 中带有注释的散点图

Question

我在 Chart.js v3.7.1 中创建了一个散点图，我正在尝试向其添加一些标签注释（chartjs-plugin-annotation 是 v1.4.0），但似乎没有正在工作。以前的版本都加过注解，现在这个版本好像不想加了。不知道我错过了什么。这是我的代码：

<div class="row">
    <div class="col-md-8 col-md-offset-1">
         <canvas id="ph" height="400" width="300" style="display:block"></canvas>
    </div>
</div>

@section Scripts {
<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>
<script type="text/javascript">

self.phGraph();
self.updatepH(phChart);
var phChart;

 self.phGraph = function () {
        var ph = document.getElementById("ph").getContext('2d');
        if (phChart != undefined) phChart.destroy();
        phChart = new Chart(ph, {
            type: 'scatter',
            data: {
               label: [],
               datasets: [
                   {
                       backgroundColor: reportColor.Blue,
                       borderColor: reportColor.Blue,
                       label: 'pH',
                       yAxisID: 'y',
                       data: [],
                       borderWidth: 1,
                       pointRadius: 5,
                       fill: false
                   },
               ]
            },
            options: {
               responsive: true,
               plugins: {
                  legend: {
                    position: 'top',
                  },
                  title: {
                    display: true,
                    text: self.selectedWell().description() + ' pH profile'
                  },
                  annotation:{
                      annotations: []
                  }
               },
               scales: {
                   x: 
                   {
                       id: 'x-axis-1',
                       title: {
                          display: true,
                          text: 'pH',
                          //color: '#911',
                          font: {
                            size: 18
                          }
                       },
                       ticks: {
                           beginAtZero: false
                       }
                   },
                   y: 
                   {
                       id: 'y-axis-1',
                        title: {
                          display: true,
                          text: 'Along hole depth from RT (ft)',
                          //color: '#911',
                          font: {
                            size: 18
                          }
                        },
                        reverse: true,
                   }
               },
               elements: {
                    point: {
                       radius: 5
                    }
               },
               legend: {
                   display: true,
                   labels: {
                       filter: (legendItem, chartData) => (!chartData.datasets[legendItem.datasetIndex].data.every(item => item === null))
                   }
               }
            }
        });
    };
    self.updatepH = function (phChart) {
        var chartPH = phChart;
        chartPH.data.labels = [];
        for (var j = 0; j < chartPH.data.datasets.length; j++) {
            chartPH.data.datasets[j].data = [];
        }

        for (let seg of segs) {
            chartPH.data.datasets[0].data.push({x: parseFloat(seg["pH"].toFixed(3)), y: parseFloat(fromSI(seg["AHD"], unit["leng"]).toFixed(1))})
        }
        console.log(chartPH.data.datasets[0].data)
        chartPH.update();
        self.phChartAnnotation(phChart);
        chartPH.update();
    };

    self.phChartAnnotation = function (phChart) {
        var chart = phChart;
        chart.options.annotation = {};
        chart.options.annotation.annotations = [];

        var count = 0;
        if(self.plotLabelList().length > 0){
            for (var i = 0; i < segs.length; i++) {
                if(count < self.plotLabelList().length){
                    if (self.plotLabelList()[count].ahd() <= parseFloat(fromSI(segs[i+1]["AHD"], unit["leng"]).toFixed(1)) && self.plotLabelList()[count].ahd() >= parseFloat(fromSI(segs[i]["AHD"], unit["leng"]).toFixed(1))) {
                        //Add labels
                        chart.options.annotation.annotations.push({                    
                            type: 'label',
                            xScaleID: "x-axis-1",
                            yScaleID: "y-axis-1",
                            yValue: parseFloat(fromSI(segs[i]["AHD"], unit["leng"]).toFixed(1)),
                            backgroundColor: 'rgba(245,245,245)',
                    
                            content: [self.plotLabelList()[count].label()],
                           textAlign: 'start',
                            font: {
                              size: 18
                            },
                        });
                        count++;
                    }
                }
            }
        }
        chart.update();
    };

如有任何帮助，我们将不胜感激！谢谢！

Answer 1

您试图在不支持的选项中直接添加注释。您必须将它们放在基本空配置中的 options.plugins 命名空间中。另外，你的 x 和 y 刻度 ID 在你的注释中是错误的。

Chart.js 中带有注释的散点图

Scatter plot in Chart.js with annotations

javascript

chart.js

chartjs-plugin-annotation