[英]how to always show label in chartjs without mouseover?
I am using latest version of Chart Js.我正在使用最新版本的 Chart Js。 I need to always show label in chart (without mouse over).
我需要始终在图表中显示标签(没有鼠标悬停)。 Is it possible?
有可能吗? If yes, then please help me with working example code.
如果是,请帮助我编写示例代码。
Thank you.谢谢。
My Current Chartjs code:我当前的 Chartjs 代码:
var ctx = $("#myChart");
var label = ctx.data('clabel').split(',');
var val = ctx.data('cval').split(',');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: label,
datasets: [{
label: 'Daily Capital',
data: val,
backgroundColor: [
'rgba(0, 153, 34, 0.5)',
],
borderColor: [
'rgba(0, 153, 34, 1);',
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
animation: {
duration: 0, // general animation time
},
hover: {
animationDuration: 0,
},
responsiveAnimationDuration: 0, // animation duration after a resize
elements: {
line: {
tension: 0, // disables bezier curves
},
},
tooltips: {
callbacks: {
label: function(tooltipItem, data){
return '£' + tooltipItem.yLabel;
},
title: function(tooltipItem, data){
return '';
},
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
I hope someone can help.我希望有人可以提供帮助。 Thank you in advance
提前谢谢你
This could be solved by adding the options
onAnimationComplete
and tooltipevents
.这可以通过添加
onAnimationComplete
和tooltipevents
options
来解决。
onAnitmationComplete
functions calls the showToolTip
method to show the tooltips
like a hover event does. onAnitmationComplete
函数调用showToolTip
方法来显示tooltips
就像悬停事件一样。
Usually tooltipevents
are define to show tooltips
but here an empty array need to be passed.通常
tooltips
tooltipevents
被定义为显示tooltips
但这里需要传递一个空数组。 Check the below fiddle example for line chart.检查下面的小提琴示例以获取折线图。
var options = {
tooltipTemplate: "<%= value %>",
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.datasets[0].points, true);
},
tooltipEvents: []
}
Note : This approach does not support multi data-sets in line and bar charts, but does support multi data-sets in pie charts注:此方式不支持折线图和条形图多数据集,但支持饼图多数据集
var data_line = { 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 options = { tooltipTemplate: "<%= value %>", showTooltips: true, onAnimationComplete: function() { this.showTooltip(this.datasets[0].points, true); }, tooltipEvents: [] } var context = $('#chart3').get(0).getContext('2d'); var chart = new Chart(context).Line(data_line, options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <div id="chartContainer"> <canvas id="chart3" width="500" height="500"></canvas> </div>
options: {
legend: {
display: false
},
hover: {
animationDuration: 0
},
animation: {
onComplete: function() {
const chartInstance = this.chart,
ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(
18,
Chart.defaults.global.defaultFontStyle,
Chart.defaults.global.defaultFontFamily
);
ctx.textAlign = "center";
ctx.textBaseline = "bottom";
this.data.datasets.forEach(function(dataset, i) {
const meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function(bar, index) {
const data = dataset.data[index];
ctx.fillStyle = "#000";
ctx.fillText(data, bar._model.x, bar._model.y - 2);
});
});
}
},
tooltips: {
enabled: true
},
responsive: true,
scales: {
xAxes: [
{
display: true,
gridLines: {
drawOnChartArea: false
}
}
],
yAxes: [
{
display: true,
gridLines: {
drawOnChartArea: false
},
ticks: {
precision: 0
}
}
]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.