Question

我使用图表js库制作饼图。我想始终显示工具提示。我做到了这一点。我附上了截图。

但现在工具提示重叠了。怎么解决这个问题？

这是我的代码

Date

我想更改工具提示位置，如果该位置已经存在。

Answer 1

实际上检测重叠的工具提示非常困难。

我最终通过停用工具箱中的颜色，减小工具提示的大小，移动工具提示更靠近外边框并隐藏所有工具提示（小于2％）来解决它。示例如下： oem_history 5

我用了以下代码：

Chart.Tooltip.positioners.outer = function(elements) {
    if (!elements.length) {
        return false;
    }

    var i, len;
    var x = 0;
    var y = 0;

    for (i = 0, len = elements.length; i < len; ++i) {
        var el = elements[i];
        if (el && el.hasValue()) {
            var elPosX = el._view.x+0.95*el._view.outerRadius*Math.cos((el._view.endAngle-el._view.startAngle)/2+el._view.startAngle);
            var elPosY = el._view.y+0.95*el._view.outerRadius*Math.sin((el._view.endAngle-el._view.startAngle)/2+el._view.startAngle);
            if (x < elPosX) {
                x = elPosX;
            }
            if (y < elPosY) {
                y = elPosY;
            }
        }
    }

    return {
        x: Math.round(x),
        y: Math.round(y)
    };
},

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) {
                    if ((sector._view.endAngle-sector._view.startAngle) > 2*Math.PI*0.02) {
                        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._options.position = "outer";
                tooltip._options.displayColors = false;
                tooltip._options.bodyFontSize = tooltip._chart.height*0.025;
                tooltip._options.yPadding = tooltip._options.bodyFontSize*0.30;
                tooltip._options.xPadding = tooltip._options.bodyFontSize*0.30;
                tooltip._options.caretSize = tooltip._options.bodyFontSize*0.5;
                tooltip._options.cornerRadius = tooltip._options.bodyFontSize*0.50;
                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;
        }
      }
    });

图表js - 避免在饼图中重叠工具提示

1 个答案: