ChartJS: Translate Month Time Axis to Dutch

时间:2017-11-08 22:03:00

标签: charts momentjs

I'm having difficulties in finding out how to change the language for the time axis. I'm using 'MMM' for month so I get a short description of the month but I can't seem to get it to Dutch. What am I doing wrong?

So instead of May there should be Mei.

This is the scrip I'm using:

moment.locale('nl');

var lvlC = document.getElementById("levelChart").getContext("2d");
var levelChart = new Chart(lvlC, {
  type: "line",
  data: {
    datasets: [
      {
        label: "Levels",
        data: [
          {
            x: '2017-01-01',
            y: 10
          },
          {
            x: '2017-02-15',
            y: 20
          },
          {
            x: '2017-06-01',
            y: 30
          },
          {
            x: '2018-10-01',
            y: 40
          }
        ],
        backgroundColor: ["rgba(0, 197, 161, 0)"],
        borderColor: ["rgba(0,197,161,1)"],
        borderWidth: 1,
        steppedLine: true
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    elements: {
      point: {
        radius: 0
      }
    },
    scales: {
      xAxes: [
        {
          type: "time",
          distribution: 'series',
          time: {
            unit: "month",
            displayFormats: {
              month: "MMM"
            },
          },
          scaleLabel: {
            display: false,
            labelString: "Date"
          },
          gridLines: {
            drawBorder: false
          },
          ticks: {
        autoSkip: true,
        maxTicksLimit: 6
    }
        }
      ],
      yAxes: [
        {
          ticks: {
            display: false,
            beginAtZero: true
          },
          gridLines: {
            drawBorder: false,
            display: false
          }
        }
      ]
    }
  }
});

I'm working on this on codepen so all the information can be found here: https://codepen.io/anon/pen/JObzZZ?editors=0010

2 个答案:

答案 0 :(得分:0)

您可以使用

ticks: {
    callback: function(value, index){              
        return moment.monthsShort(index % 12, "MMM");
    }
}

作为ticks回调选项。

答案 1 :(得分:0)

使用Chart.js v2.8时,您需要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(...);