angular - Chartjs v2.8 showAllTooltips 不存在

Question

我使用在 Angular 应用程序上运行的 chart.js 版本 2.8 创建了一个图表。我需要工具提示在默认情况下始终在图表上可见，而不仅仅是当鼠标悬停在点上时（图表是散点图）。我已经研究了如何设置它，大多数消息来源似乎都建议使用 pluginService 来注册一个修复程序以启用这种可能性。然而，chart.config.options.showAllTooltips 需要已经存在，而它似乎不再存在于 chart.js v2.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'
                        }]
                    }
                }
            });

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

标签： angulartypescriptchart.js

Answer 1

在 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：

options: {
        showAllTooltips: true
        ...

使用一些示例数据查看您的代码说明。