所以要做到这一点,你需要覆盖两个函数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",90]
        }
    ]
};
 
 
var myBarChart = new Chart(ctx).BarOneTip(data);

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