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

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

我试图说明两个重要的领域已经改变，看看扩展条类型中的 cmets。对帮助器的任何引用也进行了小的更改，因为它们在范围内，但现在它们需要显式调用 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（您可以随意调用它，扩展图表的 name 属性中的任何内容都将可供您使用。

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 得到更新，您需要手动将对函数的任何更改放入被覆盖的函数中