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

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

图1：

及

图2：

我知道它可以使用

工具提示模板：“：Files”

来定制工具提示。
但是否可以在不同的栏中显示不同的文本？

---

例如，在图1中显示12:10、13:20而不是工具提示12:00~14:00:12文件，在图2中显示14:25而不是12:00~14:00:12文件。

您可以将和中的答案组合起来

---

脚本

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,
            });
        }
    });

HTML

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

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

---

---

小提琴-

请分享更多信息Check@potatopeelings这是工作！！但是如何将工具提示居中？如果工具提示太长，它将被截断，因为我已经用jquery mobile尝试了这段代码，但它似乎不起作用。我将在下面的答案中附加代码。您可能希望更新问题或添加新问题（更好，因为您将有更多的人查看它）。问题是问题的中心点（它不同于论坛类网站）。干杯，节日快乐！我提出了一个新问题。你说的问题是什么？你能在新问题中更详细地解释一下吗？谢谢（抱歉，我是这方面的新手>哦，我的意思是StackOverflow有一个问答格式，即有一个问题（问题）和一个答案（解决方案）（请参阅）.许多其他网站都有对话格式，比如你问一些问题，有人回应，然后你回应，等等。嗯……我真傻……那么，有没有可能与jquery mobile合作，或者我该怎么做？

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