Google Charts：如何自定义轴上显示的日期格式？

Question

I follow the documentation on axes customization here but it does not say how to customize the date format on the AXES, only on the columns.

I need my axes format to be "dd/MM/yy" but unable to achieve such a simple taks...

Here is the codepen

 google.charts.load("current", { packages: ["line"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Date", "A", "B", "C", "D", "E", "F"], [new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128], [new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134], [new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148], [new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151], [new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195], [new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140], [new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131], [new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141], [new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031], [new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966] ]); var options = { chart: { title: "my graph" }, curveType: "function", legend: { position: "none" }, axes: { x: { 0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" } } }, hAxis: { format: "dd/MM/yyyy" }, vAxis: { format: "MMM d, y" } }; var chart = new google.charts.Line(document.getElementById("curve_chart")); chart.draw(data, options); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="curve_chart"></div> </div> </div> </div>

Answer 1

there are several options that are not supported by material charts.
see --> Tracking Issue for Material Chart Feature Parity

material chart --> google.charts.Line -- packages: ["line"]

classic chart --> google.visualization.LineChart -- packages: ["corechart"]

---

for the options that are supported by material charts,
you need to convert those option to material options before drawing the chart...

google.charts.Line.convertOptions(options)

see following working snippet...

 google.charts.load("current", { packages: ["line"] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ["Date", "A", "B", "C", "D", "E", "F"], [new Date(2006, 1, 1), 5394, 5014, 2480, 9380, 4852, 7128], [new Date(2006, 1, 8), 5697, 5147, 2480, 9187, 7644, 7134], [new Date(2006, 1, 16), 5780, 5192, 2480, 8941, 7729, 7148], [new Date(2006, 1, 25), 5993, 5211, 2480, 8750, 7768, 7151], [new Date(2006, 2, 2), 6207, 5282, 2480, 8636, 7827, 7195], [new Date(2006, 2, 11), 6334, 5361, 2548, 8515, 7874, 7140], [new Date(2006, 2, 16), 6687, 5346, 2566, 8347, 7895, 7131], [new Date(2006, 2, 28), 6967, 5398, 2802, 8220, 7831, 7141], [new Date(2006, 3, 1), 7061, 5419, 2818, 8198, 7827, 7031], [new Date(2006, 3, 2), 7335, 5457, 2829, 8211, 7959, 6966] ]); var options = { chart: { title: "my graph" }, curveType: "function", legend: { position: "none" }, axes: { x: { 0: { side: "top", label: "axes label", format: "dd/MM/yy", color: "red" } } }, hAxis: { format: "dd/MM/yyyy" } }; var chart = new google.charts.Line(document.getElementById("curve_chart")); chart.draw(data, google.charts.Line.convertOptions(options)); }

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <div class="container"> <div class="row"> <div class="col-md-12"> <div id="curve_chart"></div> </div> </div> </div>

---

note: in the above chart, the y-axis contains numbers,
a date format will not work on the vAxis ...

vAxis: { format: "MMM d, y" }  // <-- removed from above snippet

---

EDIT

when loading google charts, the default locale is --> 'en' to load a different locale, specify the language in the load statement...

google.charts.load("current", {
  packages: ["line"],
  language: "fr"
});