如何更改 Chart JS 中日期轴上显示的“月份”语言？答案

【问题标题】：How do I change the 'months' language displayed on the date axis in Chart JS?如何更改 Chart JS 中日期轴上显示的“月份”语言？
【发布时间】：2019-05-21 10:09:04
【问题描述】：

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

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

【问题讨论】：

标签： javascript chart.js settings

【解决方案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' );
}

【讨论】：

【解决方案2】：

导入moment-with-locales.min.js

在加载图表之前设置您的语言：

moment.locale('pt-BR');

【讨论】：

【解决方案3】：

当使用 Chart.js v2.8+ 和 moment v2+ 时，您可以使用 chartjs-adapter-moment 自动翻译轴标签：

import moment from "moment";
import "moment/locale/nl";
import Chart from "chart.js";
import "chartjs-adapter-moment";

moment.locale("nl");

new Chart(...);

【讨论】：