javascript - 如何更改 Chart JS 中日期轴上显示的 'months' 语言？

Question

我正在使用 Chart JS 绘制数据，并且在日期轴(x 轴)上显示“2018 年 12 月 20 日”，如何将月份字符串翻译成不同的语言？我希望它会被设置为浏览器上设置的任何语言，但没有。

悬停在数据点上时，工具提示也需要翻译。

Answer 1

我设法通过在创建图表时在 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' );
}