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

问题描述

我正在使用 chart.js 插件并按条形视图使用组图.当我悬停一组栏时，我可以看到一个工具提示，显示这些栏的数据.但是当我将悬停条形数据时，我要更改工具提示以显示我唯一的单个数据.我要显示不同的数据信息.jsfiddle 示例

I'm using chart.js plugin and using a group chart by bar view. when i hover a group of bars i can see a tooltip that show me the data of this bars. but i what to change the tooltip to show my only single data when I'll hover the bar data. and I what to show diffrent data info. 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);

推荐答案

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

You could extend the bar graph to include this functionality. By default it will return both bars at the index you have hovered over, it will also check for multiple bars at the area you hovered before creating the tooltip and put any extras in that were missing.

为此，您需要覆盖两个函数 getBarsAtEvent 和 showToolTip 这是一个示例和 fiddle

So to do this you will need to override two functions getBarsAtEvent and showToolTip here is an example and fiddle

我试图弄清楚两个重要的区域发生了变化，请查看扩展栏类型中的评论.对助手的任何引用也进行了小的更改，因为它们在范围内，但现在它们需要显式调用 Chart.helpers

I have tried to make it clear the two important areas that have changed look at the comments in the extended bar type. Small changes were also made to any reference of the helpers as before they were within the scope but now they need to explicitly call 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 属性中的任何内容都将可供您使用.

then to use it just do what you did before but use BarOneTip (call it whatever you like, what ever is in the name attribute of the extended chart will be available to you.

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

I should mention that if chartjs gets updated you would need to manually put any changes to the functions into the overridden ones

这篇关于图表js工具提示如何控制显示的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！