Angular Chartjs v2.8 showAllTooltips不存在

我有一个图表是使用运行在Angular应用程序上的chart.js 2.8版创建的。默认情况下，我需要工具提示在图表上始终可见，而不仅仅是当鼠标悬停在点上时（图表是散点图）。我已经研究了如何设置它，大多数消息来源似乎都建议使用pluginService来注册一个补丁来实现这一可能性。但是，chart.config.options.showAllTooltips需要已经存在，而chart.jsv2.8中似乎不再存在

this.LQChart = new Chart(this.myChart, {
                type: 'bubble',
                data: {
                    labels:['Jobs']
                }, options: {
                    plugins:{
                        colorschemes: {
                            scheme: 'brewer.YlOrBr9'
                        },
                        zoom:{
                            pan: {
                                enabled: true,
                                mode: 'xy',
                                rangeMin: {
                                    x: null,
                                    y: null
                                },
                                rangeMax:{
                                    x: null,
                                    y: null
                                }
                            },
                            zoom:{
                                enabled: true,
                                drag: false,
                                mode:'xy',
                                rangeMin: {
                                    x: null,
                                    y: null
                                },
                                rangeMax:{
                                    x: null,
                                    y: null
                                },
                                speed:0.1
                            }
                        },
                        // datalabels: {
                        //     color: 'white',
                        //     font: {
                        //         weight:'bold'
                        //     },
                        //     display: function (context) {
                        //         console.log("Algo: "+context);
                        //         return context.dataset.data[context.dataIndex] > 15;
                        //     },
                        //     formatter: function(value, context) {
                        //         console.log("Forma: "+value+" : "+context);
                        //         return context.dataIndex + ':' + Math.round(value*100) + '%';
                        //     }
                        // }
                    }, tooltips: {
                        callbacks: {
                            label: function(tooltipItem, data) {
                                var label = data.datasets[tooltipItem.datasetIndex].label || '';
                                return label
                            }
                        }
                    },legend: {
                        display: false
                    }, title: {
                        display: true,
                        text: 'Location Quotient of Jobs in Region'
                    }, scales: {
                        yAxes: [{ 
                            scaleLabel: {
                                display: true,
                                labelString: "# of Jobs"
                            },
                            id:'y-axis-0',
                            type:'linear',
                            gridLines: {
                                display:true
                            },
                            ticks: {
                                callback: function(value, index, values) {
                                    return Number(value.toString());
                                }
                            },
                            position:'left'
                        }],
                        xAxes: [{
                            scaleLabel: {
                                display: true,
                                labelString: "LQ"
                            },
                            id: 'x-axis-0',
                            type: 'linear',
                            position: 'bottom',
                        }]
                    }, annotation: {
                        annotations: [{
                            borderColor: 'black',
                            //borderDash: [2, 2],
                            borderWidth: 2,
                            mode: 'vertical',
                            type: 'line',
                            value: 1.0,
                            scaleID: 'x-axis-0'
                        }]
                    }
                }
            });

---

这是我用来创建图表的代码，我只需要知道如何将图表工具提示设置为始终可见。

在ChartJs第2版中有很多关于这个问题的讨论，您可以找到，还有

总的来说，您需要做的是为ChartJs注册您自己的插件，然后通过

options

属性使用该插件

因此，如果添加以下插件注册：

Chart.pluginService.register({
            beforeRender: function (chart) {
                if (chart.config.options.showAllTooltips) {
                    // create an array of tooltips
                    // we can't use the chart tooltip because there is only one tooltip per chart
                    chart.pluginTooltips = [];
                    chart.config.data.datasets.forEach(function (dataset, i) {
                        chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                            chart.pluginTooltips.push(new Chart.Tooltip({
                                _chart: chart.chart,
                                _chartInstance: chart,
                                _data: chart.data,
                                _options: chart.options.tooltips,
                                _active: [sector]
                            }, chart));
                        });
                    });

                    // turn off normal tooltips
                    chart.options.tooltips.enabled = false;
                }
            },
            afterDraw: function (chart, easing) {
                if (chart.config.options.showAllTooltips) {
                    // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                    if (!chart.allTooltipsOnce) {
                        if (easing !== 1)
                            return;
                        chart.allTooltipsOnce = true;
                    }

                    // turn on tooltips
                    chart.options.tooltips.enabled = true;
                    Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                        tooltip.initialize();
                        tooltip.update();
                        // we don't actually need this since we are not animating tooltips
                        tooltip.pivot();
                        tooltip.transition(easing).draw();
                    });
                    chart.options.tooltips.enabled = false;
                }
            }
        })

然后可以在

选项中添加
showAllTooltips
属性，如下所示：

options: {
        showAllTooltips: true
        ...

使用一些示例数据查看您的代码说明。
在ChartJs的V2中有很多关于这个问题的讨论，您可以找到，并且

总的来说，您需要做的是为ChartJs注册您自己的插件，然后通过
options
属性使用该插件

因此，如果添加以下插件注册：

Chart.pluginService.register({
            beforeRender: function (chart) {
                if (chart.config.options.showAllTooltips) {
                    // create an array of tooltips
                    // we can't use the chart tooltip because there is only one tooltip per chart
                    chart.pluginTooltips = [];
                    chart.config.data.datasets.forEach(function (dataset, i) {
                        chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                            chart.pluginTooltips.push(new Chart.Tooltip({
                                _chart: chart.chart,
                                _chartInstance: chart,
                                _data: chart.data,
                                _options: chart.options.tooltips,
                                _active: [sector]
                            }, chart));
                        });
                    });

                    // turn off normal tooltips
                    chart.options.tooltips.enabled = false;
                }
            },
            afterDraw: function (chart, easing) {
                if (chart.config.options.showAllTooltips) {
                    // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
                    if (!chart.allTooltipsOnce) {
                        if (easing !== 1)
                            return;
                        chart.allTooltipsOnce = true;
                    }

                    // turn on tooltips
                    chart.options.tooltips.enabled = true;
                    Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
                        tooltip.initialize();
                        tooltip.update();
                        // we don't actually need this since we are not animating tooltips
                        tooltip.pivot();
                        tooltip.transition(easing).draw();
                    });
                    chart.options.tooltips.enabled = false;
                }
            }
        })

然后可以在
选项中添加
showAllTooltips
属性，如下所示：

options: {
        showAllTooltips: true
        ...

请使用一些示例数据查看您的代码说明。
Viqas肯定给了我正确的答案，但我想修改以下内容：
如果有人遇到与我相同的问题，pluginService.register代码抛出各种错误，我想在修改后将我的注册代码发布到这里：

Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options['showAllTooltips']) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart['pluginTooltips'] = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart['pluginTooltips'].push(new (Chart as any).Tooltip({
                        _chart: chart['chart'],
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart['options']['tooltips'],
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart['options']['tooltips']['enabled'] = false;
        }
    },
    afterDraw: function (chart, easing: any) {
        if (chart.config.options['showAllTooltips']) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart['allTooltipsOnce']) {
                if (easing !== 1)
                    return;
                chart['allTooltipsOnce'] = true;
            }

            // turn on tooltips
            chart['options']['tooltips']['enabled'] = true;
            Chart.helpers.each(chart['pluginTooltips'], function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart['options']['tooltips']['enabled'] = false;
        }
    }
})

这对我很有用，我希望遇到同样问题的任何人都会觉得它很有用。
Viqas肯定给了我正确的答案，但我想修改以下内容：
如果有人遇到与我相同的问题，pluginService.register代码抛出各种错误，我想在修改后将我的注册代码发布到这里：

Chart.pluginService.register({
    beforeRender: function (chart) {
        if (chart.config.options['showAllTooltips']) {
            // create an array of tooltips
            // we can't use the chart tooltip because there is only one tooltip per chart
            chart['pluginTooltips'] = [];
            chart.config.data.datasets.forEach(function (dataset, i) {
                chart.getDatasetMeta(i).data.forEach(function (sector, j) {
                    chart['pluginTooltips'].push(new (Chart as any).Tooltip({
                        _chart: chart['chart'],
                        _chartInstance: chart,
                        _data: chart.data,
                        _options: chart['options']['tooltips'],
                        _active: [sector]
                    }, chart));
                });
            });

            // turn off normal tooltips
            chart['options']['tooltips']['enabled'] = false;
        }
    },
    afterDraw: function (chart, easing: any) {
        if (chart.config.options['showAllTooltips']) {
            // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
            if (!chart['allTooltipsOnce']) {
                if (easing !== 1)
                    return;
                chart['allTooltipsOnce'] = true;
            }

            // turn on tooltips
            chart['options']['tooltips']['enabled'] = true;
            Chart.helpers.each(chart['pluginTooltips'], function (tooltip) {
                tooltip.initialize();
                tooltip.update();
                // we don't actually need this since we are not animating tooltips
                tooltip.pivot();
                tooltip.transition(easing).draw();
            });
            chart['options']['tooltips']['enabled'] = false;
        }
    }
})

这对我很有用，我希望其他遇到同样问题的人都会觉得它很有帮助。
是的，这就是我所说的。这个解决方案就是我以前遇到的。当我尝试将其放入代码中时，我得到了以下错误：
if（chart.config.options.showAllTooltips）{
给了我：“属性'showAllTooltips'在类型'ChartOptions'上不存在”。“
chart.plugintoltips
给了我“属性'plugintoltips'在类型'chart'上不存在”。
chart.plugintoltips.push（new Chart.Tooltips（{…}））；
告诉我：“不能对类型缺少调用或构造签名的表达式使用'new'除此之外，在我的回答中，你是否可以看看我在StackBlitz中是如何做到的？是的，我做了。现在我已经玩了一些，我仍然得到了我提到的所有错误。事实上，我在Visual Studio代码中的代码只是布满了红线和错误警告。但是，当我按下“运行”时，它一切正常，并显示工具提示默认情况下，完全符合我的要求。我会将问题标记为已解决。谢谢你的帮助。我只需要找出为什么我会在没有错误的地方看到错误。听起来你所有的错误都是由于打字造成的，即vscode认为你指定的类型上不存在属性。我已经进行了一些重新格式化，并删除了大部分错误。两个错误仍然存在。在
new Chart.Tooltip（{…}）中，它仍然给我“不能将'new'与类型缺少调用或构造签名的表达式一起使用”。在
easing！==1中，它给我“此条件将始终返回'true'，因为类型'easing'和'1'没有重叠。”是的，这就是我所说的。这个解决方案就是我以前遇到的。当我尝试将它放入代码中时，我得到以下错误：
if（chart.config.options.showAllTooltips）{
给了我：“属性‘showAllTooltips’在类型‘ChartOptions’上不存在。”
chart.plugintoltips
给了我答案“属性'plugintoltips'在类型'Chart'上不存在。”
Chart.plugintoltips.push（new Chart.Tooltips（{…}））；
告诉我：“不能将'new'与类型缺少调用或构造签名的表达式一起使用。”。"除此之外，在我的回答中，你是否可以看看我在StackBlitz中是如何做到的？是的，我做了。现在我已经玩了一些，我仍然得到了我提到的所有错误。事实上，我在Visual Studio代码中的代码只是布满了红线和错误警告。但是，当我按下“运行”时，它一切正常，并显示工具提示默认情况下，完全符合我的要求。我会将问题标记为已解决。谢谢你的帮助。我只需要找出为什么我会在没有错误的地方看到错误。听起来你所有的错误都是由于打字造成的，即vscode认为你指定的类型上不存在属性。我已经进行了一些重新格式化，并删除了大部分错误。两个错误仍然存在。在
new Chart.Tooltip（{…}）中，它仍然给我“不能将'new'与类型缺少调用或构造签名的表达式一起使用”。在
easing！==1中，它给我“此条件将始终返回'true'，因为类型'easing'和'1'没有重叠。”