chart.js - 自定义条形图的不同工具提示

Question

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

图 1:

和

图 2:

.

我知道它可以使用 tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %> Files"自定义工具提示。
但是是否可以在不同的栏中显示不同的文本？

例如，在图1中显示12:10、13:20而不是tooltip 12:00~14:00: 12 Files并显示 14:25 而不是图2中的12:00~14:00: 12 Files

Answer 1

您可以结合 How to modify chartjs tooltip to add customized attribute 和 How to make tool tip contents display on multiple lines 的答案

---

脚本

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 的限制)

---

fiddle - http://jsfiddle.net/69vt0091/