Question

我正在使用chart.js插件并通过栏视图使用组图表。当我悬停一组酒吧时，我可以看到一个工具提示，向我显示这些酒吧的数据。但是当我将鼠标悬停在数据栏上时，我要更改工具提示以显示我唯一的单个数据。而我该如何显示不同的数据信息。 jsfiddle example

    var ctx = document.getElementById("errorChart").getContext("2d");
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 0, 0, 0, 0, 0, 0]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var myBarChart = new Chart(ctx).Bar(data);

Answer 1

您可以扩展条形图以包含此功能。默认情况下，它会返回您悬停在其上的索引处的两个条形图，它还会在创建工具提示之前检查您悬停的区域中的多个条形图，并将缺少的任何附加元素放入其中。

要做到这一点，你需要覆盖两个函数getBarsAtEvent和showToolTip这里是一个例子fiddle

我试图说明已更改的两个重要区域，查看扩展栏类型中的注释。对帮助者的任何引用也进行了小的更改，因为它们在范围内，但现在需要显式调用Chart.helpers

Chart.types.Bar.extend({

    name: "BarOneTip",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
    },
    getBarsAtEvent : function(e){
            var barsArray = [],
                eventPosition = Chart.helpers.getRelativePosition(e),
                datasetIterator = function(dataset){
                    barsArray.push(dataset.bars[barIndex]);
                },
                barIndex;

            for (var datasetIndex = 0; datasetIndex < this.datasets.length; datasetIndex++) {
                for (barIndex = 0; barIndex < this.datasets[datasetIndex].bars.length; barIndex++) {
                    if (this.datasets[datasetIndex].bars[barIndex].inRange(eventPosition.x,eventPosition.y)){

                        //change here to only return the intrested bar not the group
                        barsArray.push(this.datasets[datasetIndex].bars[barIndex]);
                        return barsArray;
                    }
                }
            }

            return barsArray;
        },
    showTooltip : function(ChartElements, forceRedraw){
        console.log(ChartElements);
            // Only redraw the chart if we've actually changed what we're hovering on.
            if (typeof this.activeElements === 'undefined') this.activeElements = [];

            var isChanged = (function(Elements){
                var changed = false;

                if (Elements.length !== this.activeElements.length){
                    changed = true;
                    return changed;
                }

                Chart.helpers.each(Elements, function(element, index){
                    if (element !== this.activeElements[index]){
                        changed = true;
                    }
                }, this);
                return changed;
            }).call(this, ChartElements);

            if (!isChanged && !forceRedraw){
                return;
            }
            else{
                this.activeElements = ChartElements;
            }
            this.draw();
            console.log(this)
            if (ChartElements.length > 0){

                //removed the check for multiple bars at the index now just want one
                    Chart.helpers.each(ChartElements, function(Element) {
                        var tooltipPosition = Element.tooltipPosition();
                        new Chart.Tooltip({
                            x: Math.round(tooltipPosition.x),
                            y: Math.round(tooltipPosition.y),
                            xPadding: this.options.tooltipXPadding,
                            yPadding: this.options.tooltipYPadding,
                            fillColor: this.options.tooltipFillColor,
                            textColor: this.options.tooltipFontColor,
                            fontFamily: this.options.tooltipFontFamily,
                            fontStyle: this.options.tooltipFontStyle,
                            fontSize: this.options.tooltipFontSize,
                            caretHeight: this.options.tooltipCaretSize,
                            cornerRadius: this.options.tooltipCornerRadius,
                            text: Chart.helpers.template(this.options.tooltipTemplate, Element),
                            chart: this.chart
                        }).draw();
                    }, this);

            }
            return this;
        }

});

然后使用它只是做你以前做过的事情，但是使用BarOneTip（无论你喜欢什么，都可以使用扩展图表的名称属性。

var ctx = document.getElementById("errorChart").getContext("2d");
var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [65, 0, 0, 0, 0, 0, 0]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};


var myBarChart = new Chart(ctx).BarOneTip(data);

我应该提一下，如果chartjs得到更新，你需要手动将任何更改添加到被覆盖的函数中

chart js tooltip如何控制显示的数据

1 个答案: