Chart.js 如何将自定义文本添加到charts.js中的工具提示

我目前正在摆弄一些图表，我希望当你在某些数据点上悬停时，会出现一串文本

例如，当前我的数据集如下所示：

var data = {
    labels: ["January", "February:", "March", "April", "May", "June", "July"],
    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]
    }]
};

例如，我想将鼠标悬停在二月：59点上，让它显示“二月：59-一些独特的文本”

---

谢谢

首先将其添加到html中

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

（请注意，Chart.js已经自动添加工具提示文本；上面的问题有点不清楚。问题是如何将自定义文本添加到工具提示，而不仅仅是它选择的默认值—给定点的x和y值。） 使用

选项中的
回调
字段。工具提示

。请注意，工具提示的主体称为“标签”

工具提示：{
intersect:false，//使在移动设备上选择工具提示更容易
回调：{
标题：（工具提示项，数据）=>{
让title=toolTipItem[0].x；//使用此点的x值作为标题
返回标题；
},
标签：（工具提示项，数据）=>{
让labels=data[toolTipItem.index！].labelText；//假设您的数据有一个'labelText'字段。
退货标签；
},
},
},

请注意，一些字段（如

title

）在其回调中传递了

toolTipItem

对象数组；其他的，如

标签

，则传递一个对象。因此，对于每个对象，

toolTipItem

对象的属性必须以不同的方式访问

• 回调文档：
• 可在

  工具提示项

  对象上访问的属性-
• 一些官方例子：
  • 非正式：

• 如何包装长标签线？ 不管怎样，将标签拆分成一个数组，然后返回该数组；数组中的每一行将位于单独的行上。如果行仍然太长，则需要使用函数检测长行并将其拆分为其他数组项

---

看看这个男人，这个回答了你的问题吗？这不就是把数字加粗了吗？我希望它添加不是标签或数据一部分的自定义文本。谢谢。这个自定义文本来自哪里？上面的解决方案有用吗？@uzaif我想OP想知道将自定义文本放在哪里，以便在工具提示中呈现。这就是我想做的，也是我发现这个问题的原因。

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    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).Line(data, {
    customTooltips: function (tooltip) {
        var tooltipEl = $('#chartjs-tooltip');

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

        tooltipEl.removeClass('above below');
        tooltipEl.addClass(tooltip.yAlign);

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

        tooltipEl.css({
            opacity: 1,
            left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
            top: tooltip.chart.canvas.offsetTop + tooltip.y + 'px',
            fontFamily: tooltip.fontFamily,
            fontSize: tooltip.fontSize,
            fontStyle: tooltip.fontStyle,
        });
    }
});

 #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%, 0);
     transform: translate(-50%, 0);
 }