Строка Chart.js из плагина аннотаций не отображается

Question

Использование плагина аннотаций для chart.js в приложении Angular, поэтому я прошу прощения, если это является чем-то конкретным.Плагин аннотации должен создать вертикальную линию со значением = 1 на оси x.

Однако в этот момент ничего не появляется.Нет ошибок или чего-то в этом роде, однако нет линии.

Ось X на моем графике находится в плавающей форме, поэтому я попробовал value=1.0, однако это не принесло успеха.Я должен отметить, что плагин colorschemes работает отлично, поэтому плагины не так или иначе отключены.

import * as Chart from 'chart.js';
import 'chartjs-plugin-colorschemes';
import 'chartjs-plugin-annotation';

[...]

let massPopChart = new Chart(this.myChart, {
    type: 'bubble',
            data: {
                labels:['Jobs']
            },
            options: {
                plugins:{
                    colorschemes: {
                        scheme: 'brewer.YlOrBr9'
                    },
                    annotation: {
                        annotations: [{
                            type: 'line',
                            mode: 'vertical',
                            scaleID: 'y-axis-0',
                            value: 1,
                            borderColor: 'red',
                            borderWidth: 5,
                            label: {
                                enabled: false,
                                content: 'Test label'
                            }
                       }]
                    }
                }, legend: {
                    display: false
                }, title: {
                   display: true,
                    text: 'Location Quotient of Jobs in Region'
                }, scales: {
                    yAxes: [{ 
                        scaleLabel: {
                            display: true,
                            labelString: "# of Jobs"
                       }
                   }],
                        xAxes: [{ 
                        scaleLabel: {
                            display: true,
                            labelString: "LQ"
                        }
                    }]
                }
            }
        });

this.jobTitles.forEach((value) => {
            var r = parseInt(this.regionData.merged_titles[value])/100;
            if(r < 5) r = 5;
            else if (r>15) r = 15;
            massPopChart.data.datasets.push({
                label: value,
                data: [{
                    x: parseFloat(this.regionData.location_quotient[value]),
                    y: parseInt(this.regionData.merged_titles[value]),
                    r: r
                }]
           });
            massPopChart.update();
        });   

Моя диаграмма просто отлично работает.Все точки отображаются в цветах, определенных плагином colorscheme, однако сплошной красной линии на 1 по оси x нет.

Answer 1

Если кто-нибудь столкнется с этой проблемой в будущем, я наткнулся на решение node_modules > @types > chart.js > index.d.ts и поместил строку annotation?: Object; в разделе interface ChartOptions вокруг строки 217. Затем я реструктурировал код следующим образом...

let massPopChart = new Chart(this.myChart, {
    type: 'bubble',
    data: {
        labels:['Jobs']
    },
    options: {
        plugins:{
            colorschemes: {
                scheme: 'brewer.YlOrBr9'
            }
        }, legend: {
            display: false
        }, title: {
           display: true,
           text: 'Location Quotient of Jobs in Region'
        }, annotation: {
                annotations: [{
                    type: 'line',
                    mode: 'vertical',
                    scaleID: 'y-axis-0',
                    value: 1,
                    borderColor: 'red',
                    borderWidth: 5,
                    label: {
                        enabled: false,
                        content: 'Test label'
                    }
               }]
            }, scales: {
            yAxes: [{ 
                scaleLabel: {
                    display: true,
                    labelString: "# of Jobs"
               }
           }],
                xAxes: [{ 
                scaleLabel: {
                    display: true,
                    labelString: "LQ"
                }
            }]
        }
    }
});

Перемещение раздела «аннотации» из раздела «Плагины:» в общий раздел «Опции».