如何解决Charts.js-仅显示最后一个值的数据标签
我有一个用Charts.js创建的折线图,我只想显示x轴的最后一个值的数据标签。意思是我想显示所有数据点,但仅显示最后一个数据点的数据标签。
例如:
使用以下答案,我能够显示所有数据集的每个点的数据标签:Show values on top of bars in chart.js,但我的目标是仅显示最后一个数据点的1个标签,我在这里有点困惑。
这里是codepen link
var TITLE = 'Trend Coronavirus per Giorno';
var X_AXIS = ''; // x-axis label and label in tooltip
var Y_AXIS = ''; // y-axis label and label in tooltip
var BEGIN_AT_ZERO = false; // Should x-axis start from 0? `true` or `false`
var SHOW_GRID = true; // `true` to show the grid,`false` to hide
var SHOW_LEGEND = true; // `true` to show the legend,`false` to hide
$(document).ready(function() {
// Read data file and create a chart
$.get('https://localchef.it/csv/trendbyday.csv',function(csvString) {
var data = Papa.parse(csvString).data;
var timeLabels = data.slice(1).map(function(row) { return row[0]; });
var datasets = [];
for (var i = 1; i < data[0].length; i++) {
datasets.push(
{
label: data[0][i],// column name
data: data.slice(1).map(function(row) {return row[i]}),// data in that column
fill: false // `true` for area charts,`false` for regular line charts
}
)
}
// Get container for the chart
var ctx = document.getElementById('chart-container').getContext('2d');
new Chart(ctx,{
type: 'line',data: {
labels: timeLabels,datasets: datasets,},options: {
"animation": {
"duration": 1,"onComplete": function () {
var chartInstance = this.chart,ctx = chartInstance.ctx;
ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize,Chart.defaults.global.defaultFontStyle,Chart.defaults.global.defaultFontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset,i) {
var meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (line) {
var data = dataset.data[1];
ctx.fillText(data,line._model.x,line._model.y - 5);
});
});
}
},title: {
display: true,text: TITLE,fontSize: 16,legend: {
display: true,labels: {
boxWidth: 15,maintainAspectRatio: false,scales: {
xAxes: [{
scaleLabel: {
display: X_AXIS !== '',labelString: X_AXIS
},gridLines: {
display: false,ticks: {
callback: function(value,index,values) {
return value.toLocaleString();
}
}
}],yAxes: [{
beginAtZero: true,scaleLabel: {
display: Y_AXIS !== '',labelString: Y_AXIS
},gridLines: {
display: SHOW_GRID,ticks: {
beginAtZero: BEGIN_AT_ZERO,callback: function(value,values) {
return value.toLocaleString()
}
}
}]
},tooltips: {
displayColors: true,mode: 'index',intersect: false,callbacks: {
label: function(tooltipItem,all) {
return all.datasets[tooltipItem.datasetIndex].label
+ ': ' + tooltipItem.yLabel.toLocaleString();
}
}
},plugins: {
colorschemes: {
scheme: 'brewer.Paired12'
}
}
}
});
});
});
<!-- Load jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Load Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://localchef.it/csv/jscolors.js"></script>
<!-- Load PapaParse to read csv files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<div>
<canvas id="chart-container" style="height: 400px; width: 100%"></canvas>
</div>
<script src="script.js"></script>
有人可以帮我吗?
解决方法
这可以通过 DataLabels Plugin 完成。
将 JS 文件添加到您的 HTML:
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
注意:一定要把它添加到 Chart.js 脚本包含的下面。
启用数据标签插件并向选项配置对象添加自定义标签格式化程序:
plugins: {
datalabels: {
formatter: function(value,context) {
if (context.dataIndex === context.dataset.data.length - 1)
{
return value.y;
}
return "";
}
},}
,
仅显示最后一点,您可以取消设置不需要的数据(json数组)。
为此,(不知道您获得了哪种数据源)在数组中循环并使用
unset($my_var["key_of_value_to_delete"]);
普通数组:
delete array[0];
最好的办法是:只检索您真正需要的数据。以这种方式发送服务器请求,您只会得到真正需要的结果。 关键字:
查询和过滤
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。