Chart.js:更改工具提示模板 [英] Chart.js: changing tooltip template
问题描述
我需要更改Chart.js工具提示模板,以便仅值部分以粗体显示。有tooltipTemplate选项,它应该完全执行此操作。此选项的默认值为:
I need to change Chart.js tooltip template, so that only value part is displayed in bold. There is tooltipTemplate option, which should do exactly this. Default value of this option is:
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%"
我尝试过这样编辑它:
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><strong><%= value %></strong>%"
但它会在屏幕上显示 strong
标签作为文本的一部分,而不是呈现粗体文本。我尝试将它们移动到<%
和%>
,但是仍然无法正常工作。有任何想法吗?
But it displays strong
tags on screen as part of text, instead of rendering bold text. I tried moving them around <%
and %>
, but it still doesn't work. Any ideas?
推荐答案
模板无法识别HTML。您必须使用customTooltips选项。以下是从 https://github.com改编(但未优化)的示例/nnnick/Chart.js/blob/master/samples/line-customTooltips.html
The template does not recognize HTML. You have to use the customTooltips option. Below is an example adapted (but not optimized) from https://github.com/nnnick/Chart.js/blob/master/samples/line-customTooltips.html
HTML
<canvas id="myChart" width="400" height="200"></canvas>
<div id="chartjs-tooltip"></div>
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%, 0);
transform: translate(-50%, 0);
}
JS
var ctx = $("#myChart").get(0).getContext("2d");
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,
});
}
});
小提琴- http://jsfiddle.net/6rxdo0c0/1/
这篇关于Chart.js:更改工具提示模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!