Question

我正在使用Chart JS绘制数据，并且在日期轴（x轴）上显示“ 2018年12月20日”，如何将month字符串转换为其他语言？我希望可以将其设置为浏览器上设置的任何语言，但是不会。

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

Answer 1

导入moment-with-locales.min.js

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

moment.locale('pt-BR');

Answer 2

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

Answer 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(...);

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

3 个答案: