图表JS：始终在多数据集折线图中显示工具提示 [英] Chart JS: Always show tooltips in a multi dataset line chart

问题描述

我想在ChartJS中为多个数据集折线图始终显示工具提示

现有的解决方案仅适用于单个数据集（例如

只需更改您的选项

  var options = {
 showTooltips：true，
 onAnimationComplete ：function（）{
 for（var dataIndex = 0; dataIndex< this.datasets [0] .points.length; dataIndex ++）{
 //以下几乎是从Chart.js库复制粘贴
 var tooltipLabels = []，
 tooltipColors = []，
 medianPosition = function（index）{
 
 //获取特定索引处的所有点
 var Elements = []，
 dataCollection，
 xPositions = []，
 yPositions = []，
 xMax，
 yMax，
 xMin，
 yMin; 
 Chart.helpers.each（this.datasets，function（dataset）{ 
 dataCollection = dataset.points; 
 if（dataCollection [dataIndex]&& dataCollection [dataIndex] .hasValue（））{
 Elements.push（dataCollection [dataIndex]）; 
} 
}）; 
 
 Chart.helpers.each（Elements，function（element）{
 xPositions.push（element.x）; 
 yPositions.push（element.y）; 
 
 //包含元素的任何颜色信息
 tooltipLabels.push（Chart.helpers.template（this.options.multiTooltipTemplate，element））; 
 tooltipColors.push（{
 fill：element._saved.fillColor || element.fillColor，
 stroke：element._saved.strokeColor || element.strokeColor 
}）; 
 
}，this）; 
 
 yMin = Chart.helpers.min（yPositions）; 
 yMax = Chart.helpers.max（yPositions）; 
 
 xMin = Chart.helpers.min（xPositions）; 
 xMax = Chart.helpers.max（xPositions）; 
 
 return {
 x：（xMin> this.chart.width / 2）？ xMin：xMax，
 y：（yMin + yMax）/ 2 
}; 
}）。call（this，dataIndex）; 
 
 new Chart.MultiTooltip（{
x：medianPosition.x，
y：medianPosition.y，
 xPadding：this.options.tooltipXPadding，
 yPadding： this.options.tooltipYPadding，
 xOffset：this.options.tooltipXOffset，
 fillColor：this.options.tooltipFillColor，
 textColor：this.options.tooltipFontColor，
 fontFamily：this。 options.tooltipFontFamily，
 fontStyle：this.options.tooltipFontStyle，
 fontSize：this.options.tooltipFontSize，
 titleTextColor：this.options.tooltipTitleFontColor，
 titleFontFamily：this.options。 tooltipTitleFontFamily，
 titleFontStyle：this.options.tooltipTitleFontStyle，
 titleFontSize：this.options.tooltipTitleFontSize，
 cornerRadius：this.options.tooltipCornerRadius，
 labels：tooltipLabels，
 legendColors：tooltipColors，
 legendColorBackground：this.options.multiTooltipKeyBackground，
 title：this.scale.xLabels [dataIndex]，
 chart：this.chart，
 ctx：this.chart .ctx，
 custom：this.options.customTooltips 
}）。draw（）; 
} 
}，
 tooltipEvents：[]，
 datasetFill：true，
} 
  

---

小提琴 - https： //jsfiddle.net/racqd639/

I'm trying to always show tooltips for a multi dataset line chart in ChartJS

The existing solutions only work for a single dataset (e.g. Chart.js - Doughnut show tooltips always?) like so:

var options = 
{
    tooltipTemplate: "<%= value %>",

    onAnimationComplete: function()
    {
        this.showTooltip(this.segments, true);

        //Show tooltips in bar chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].bars, true);

        //Show tooltips in line chart (issue: multiple datasets doesnt work http://jsfiddle.net/5gyfykka/14/)
        //this.showTooltip(this.datasets[0].points, true);  
    },

    tooltipEvents: [],

    showTooltips: true
}

var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);  

The existing JS Fiddle for working single dataset solution: http://jsfiddle.net/5gyfykka/14/

I have managed to get How to display Line Chart dataset point labels with Chart.js? working using a different onAnimationComplete function

 onAnimationComplete: function () {
       var ctx = document.getElementById("LineWithLine").getContext("2d");
       ctx.font = '.8rem "Gotham Book",sans-serif';
                ctx.fontWeight = 'bold';
                ctx.fillStyle = '#000';
                ctx.textAlign="right";
            var self = this;
                $(self.datasets).each(function(idx,dataset){
                    $(dataset.points).each(function(pdx,pointinfo){
                        if ( pointinfo.value !== null ) {
                            ctx.fillText(pointinfo.value,pointinfo.x,pointinfo.y - 18);
                        }
                    });
                });         
    },

And while this works, it's not as nice as the multi tooltip that Chart JS provides.

JS Fiddle: https://jsfiddle.net/hdnu4bpa/

解决方案

You need to kind of take control over the tootip generation process (i.e. copy paste the relevant section of code from the Chart.js library :-))

Show Tooltips automatically (without hover) for Multi Series Line Charts

Here's how its going to look

Just change your options like this

var options = {
    showTooltips: true,
    onAnimationComplete: function () {
        for (var dataIndex = 0; dataIndex < this.datasets[0].points.length; dataIndex++) {
            // the following is pretty much a copy-paste from the Chart.js library
            var tooltipLabels = [],
                tooltipColors = [],
                medianPosition = (function (index) {

                    // Get all the points at that particular index
                    var Elements = [],
                        dataCollection,
                        xPositions = [],
                        yPositions = [],
                        xMax,
                        yMax,
                        xMin,
                        yMin;
                    Chart.helpers.each(this.datasets, function (dataset) {
                        dataCollection = dataset.points;
                        if (dataCollection[dataIndex] && dataCollection[dataIndex].hasValue()) {
                            Elements.push(dataCollection[dataIndex]);
                        }
                    });

                    Chart.helpers.each(Elements, function (element) {
                        xPositions.push(element.x);
                        yPositions.push(element.y);

                        //Include any colour information about the element
                        tooltipLabels.push(Chart.helpers.template(this.options.multiTooltipTemplate, element));
                        tooltipColors.push({
                            fill: element._saved.fillColor || element.fillColor,
                            stroke: element._saved.strokeColor || element.strokeColor
                        });

                    }, this);

                    yMin = Chart.helpers.min(yPositions);
                    yMax = Chart.helpers.max(yPositions);

                    xMin = Chart.helpers.min(xPositions);
                    xMax = Chart.helpers.max(xPositions);

                    return {
                        x: (xMin > this.chart.width / 2) ? xMin : xMax,
                        y: (yMin + yMax) / 2
                    };
                }).call(this, dataIndex);

            new Chart.MultiTooltip({
                x: medianPosition.x,
                y: medianPosition.y,
                xPadding: this.options.tooltipXPadding,
                yPadding: this.options.tooltipYPadding,
                xOffset: this.options.tooltipXOffset,
                fillColor: this.options.tooltipFillColor,
                textColor: this.options.tooltipFontColor,
                fontFamily: this.options.tooltipFontFamily,
                fontStyle: this.options.tooltipFontStyle,
                fontSize: this.options.tooltipFontSize,
                titleTextColor: this.options.tooltipTitleFontColor,
                titleFontFamily: this.options.tooltipTitleFontFamily,
                titleFontStyle: this.options.tooltipTitleFontStyle,
                titleFontSize: this.options.tooltipTitleFontSize,
                cornerRadius: this.options.tooltipCornerRadius,
                labels: tooltipLabels,
                legendColors: tooltipColors,
                legendColorBackground: this.options.multiTooltipKeyBackground,
                title: this.scale.xLabels[dataIndex],
                chart: this.chart,
                ctx: this.chart.ctx,
                custom: this.options.customTooltips
            }).draw();
        }
    },
    tooltipEvents: [],
    datasetFill: true,
}

---

Fiddle - https://jsfiddle.net/racqd639/

这篇关于图表JS：始终在多数据集折线图中显示工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！