图表js工具提示如何控制显示的数据

您可以扩展条形图以包含此功能。默认情况下，它将返回您悬停过的索引处的两个栏，在创建工具提示之前，它还将检查您悬停过的区域是否有多个栏，并添加任何缺失的额外栏。

要做到这一点，你需要重写两个函数getBarsAtEvent和showToolTip这里是一个例子，然后点击

我已经试着让它清楚的两个重要的领域已经改变看看在扩展栏类型的注释。对helper的任何引用也做了一些小的更改，就像以前它们在作用域中一样，但是现在它们需要显式地调用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得到更新，你需要手动将任何对函数的更改放入覆盖的