自定义条形图的不同工具提示 [英] Customize different tooltips of bar chart

问题描述

我现在正尝试通过chart.js绘制条形图。

结果为

I'm now trying to plot bar chart by chart.js.
The result as

图1：

和

图2：

。

我知道它可以使用 tooltipTemplate：<％if（标签）{％><％= label％> :：<％}％><％=值％>文件

但是可以在不同的栏中显示不同的文本吗？

I know it can use tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files" to custmize the tooltips.
But is it possible to show different text in different bar?

例如，显示 12:10 ，13:20 而不是工具提示 12：00〜14：00：12个文件，如图1所示，并显示 14:25 而不是 12 ：00〜14：00：12个文件。在图2中。

For example, show 12:10, 13:20 instead of tooltip 12:00~14:00: 12 Files in Fig. 1 and show 14:25 instead of 12:00~14:00: 12 Files in Fig. 2.

推荐答案

您可以将< href = https：// stackover flow.com/questions/34138456/how-to-modify-chartjs-tooltip-to-add-customized-attribute/34154654#34154654>如何修改chartjs工具提示以添加自定义属性和如何使工具提示内容显示在多行上

脚本

function Label(short, long) {
  this.short = short;
  this.long = long
}
Label.prototype.toString = function() {
  return this.short;
}


var ctx = $("#myChart").get(0).getContext("2d");

var data = {
    labels: [ 
      new Label("J", "S JAN JAN JAN JAN JAN JAN JAN E"), 
      new Label("F", "S FEB E"), 
      new Label("M", "S MAR E"),
      new Label("A", "S APR APR APR APR APR APR APR E"),
      new Label("M", "S MAY E"),
      new Label("J", "S JUN E"),
      new Label("J", "S JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL JUL E")
    ],
    datasets: [{
        label: "My First dataset",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: [65, 59, 80, 81, 56, 55, 40]
    }]
};

    var myLineChart = new Chart(ctx).Bar(data, {
        tooltipTemplate: "<%if (label){%><%=label.long%>: <%}%><%= value %>",
        customTooltips: function (tooltip) {
            var tooltipEl = $('#chartjs-tooltip');

            if (!tooltip) {
                tooltipEl.css({
                    opacity: 0
                });
                return;
            }

            // split out the label and value and make your own tooltip here
            var parts = tooltip.text.split(":");
            var re = new RegExp('\b', 'g');
            var innerHtml = '<span>' + parts[0].trim().replace(re, '<br/>') + '</span> : <span><b>' + parts[1].trim() + '</b></span>';
            tooltipEl.html(innerHtml);

            tooltipEl.css({
                opacity: 1,
                // the minimum amount is half the maximum width of the tooltip that we set in CSS ...
                // ... + the x scale padding so that it's not right at the edge
                left: Math.max(75 + 10, tooltip.chart.canvas.offsetLeft + tooltip.x) + 'px',
                top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
                fontFamily: tooltip.fontFamily,
                fontSize: tooltip.fontSize,
                fontStyle: tooltip.fontStyle,
            });
        }
    });

CSS

 #chartjs-tooltip {
     opacity: 0;
     position: absolute;
     background: rgba(0, 0, 0, .7);
     color: white;
     padding: 3px;
     border-radius: 3px;
     -webkit-transition: all .1s ease;
     transition: all .1s ease;
     pointer-events: none;
     -webkit-transform: translate(-50%, -120%);
     transform: translate(-50%, -120%);
     max-width: 150px;
 }

HTML

<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>

请注意，我已经调整了左侧边缘。如果顶部或右侧的空间不足，则也需要对这些边缘进行同样的操作（tooltip.x的最大限制和tooltip.y的限制）

Note that I've adjusted for the left side edge. If you don't have enough space on the top or the right, you'll need to do the same for those edges as well (maximum limit for tooltip.x and limit for tooltip.y)

小提琴- http://jsfiddle.net / 69vt0091 /

这篇关于自定义条形图的不同工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！