我正在使用Chart JS绘制数据,并且在日期轴(x轴)上显示``2018年12月20日'',如何将月份字符串转换为其他语言?我希望将其设置为浏览器上设置的任何语言,但是不会。
悬停数据点时,工具提示也需要翻译。
最佳答案
我设法通过在创建图表时在xAxis : ticks
和tooltips : title
上创建回调函数来解决此问题。
这是设置chart.js的代码:
<script>
var data = JSON.parse('<?php echo $data?>');
var ctx = document.getElementById("points-given-chart").getContext('2d');
var chartPoints = new Chart( ctx, {
type: 'line',
data: {
datasets: [
{
data: data,
borderWidth: 3,
label: 'Pontos',
borderColor: 'rgba(246, 185, 59,1.0)',
backgroundColor: 'rgba(250, 211, 144,1.0)',
}
]
},
options: {
responsive: true,
title: {
display: false,
text: "Pontos"
},
scales: {
xAxes: [{
type: "time",
time: {
unit: 'day',
tooltipFormat: 'D MMM, YYYY',
displayFormats: {
day: 'D MMM'
},
distribution: 'series'
},
scaleLabel: {
display: true,
},
ticks : {
// Here's where the magic happens:
callback: function( label, index, labels ) {
return translate_this_label( label );
}
}
}],
yAxes: [{
scaleLabel: {
display: false,
labelString: 'Pontos'
},
ticks : {
beginAtZero : true,
callback: function( label, index, labels ) {
if ( label > 1 )
return formatNumber( label, 0, ',', '.');
else
return label;
}
}
}]
},
elements: {
line: {
tension: 0.2, // disables bezier curves
}
},
legend: {
display: false
},
tooltips: {
callbacks: {
// Here's where the magic happens:
title: function( data ) {
return translate_this_label( data[0].xLabel );
},
label: function ( item, data ) {
return 'Pontos: ' + formatNumber( item.yLabel, 0, ',', '.');
}
}
}
}
});
</script>
这是执行翻译的辅助函数:
function translate_month( month ) {
var result = month;
switch(month) {
case 'Feb':
result = 'Fev' ;
break;
case 'Apr':
result = 'Abr' ;
break;
case 'May':
result = 'Mai' ;
break;
case 'Aug':
result = 'Ago' ;
break;
case 'Sep':
result = 'Set' ;
break;
case 'Dec':
result = 'Dez' ;
break;
}
return result;
}
function translate_this_label( label ) {
month = label.match(/Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Nov|Dec/g);
if ( ! month )
return label;
translation = translate_month( month[0] );
return label.replace( month, translation, 'g' );
}