Javascript 自定义chart.js条形图上的工具提示
我想自定义chart.js条形图上的工具提示。这是我的代码:Javascript 自定义chart.js条形图上的工具提示,javascript,charts,chart.js,Javascript,Charts,Chart.js,我想自定义chart.js条形图上的工具提示。这是我的代码: $(function () { var barData = no_houses_person var barOptions = { scaleBeginAtZero: true, scaleShowGridLines: true, scaleGridLineColor: "rgba(0,0,0,.05)", legend: { display: true, posi
$(function () {
var barData = no_houses_person
var barOptions = {
scaleBeginAtZero: true,
scaleShowGridLines: true,
scaleGridLineColor: "rgba(0,0,0,.05)",
legend: {
display: true,
position: 'top'
},
scaleGridLineWidth: 1,
barShowStroke: true,
barStrokeWidth: 1,
barValueSpacing: 5,
barDatasetSpacing: 1,
responsive: true,
};
var ctx = document.getElementById("barChart").getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'bar',
data: barData,
options: barOptions
});
});
我尝试将
tooltipTemplate:“(示例)”,
添加到barOptions,但没有效果。Chart.js已从模板移动到v2+中,因此,例如,如果您只想修改工具提示文本
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "$" + Number(tooltipItem.yLabel) + " and so worth it !";
}
}
}
结果:
代码笔:
有关更复杂的工具提示自定义,请参见github上的示例:Chart.js已从模板移动到v2+,因此,例如,如果您只想修改工具提示文本
tooltips: {
callbacks: {
label: function(tooltipItem) {
return "$" + Number(tooltipItem.yLabel) + " and so worth it !";
}
}
}
结果:
代码笔:
有关更复杂的工具提示自定义,请参见github上的示例: