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

Question

我遵循了关于坐标轴自定义的文档 here，但它没有说明如何在 AXES 上自定义日期格式，只是在列上。

我需要我的坐标轴格式为 "dd/MM/yy" 但无法实现如此简单的任务...

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

material 图表不支持多个选项。
参见 --> Tracking Issue for Material Chart Feature Parity

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

经典图表-->google.visualization.LineChart--packages: ["corechart"]

对于 material 图表支持的选项，
在绘制图表之前，您需要将这些选项转换为 material 选项...

google.charts.Line.convertOptions(options)

请参阅以下工作片段...

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>

注意：在上图中，y轴包含数字，
日期格式不适用于 vAxis...

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

编辑

加载 google 图表时，默认区域设置为 --> 'en' 要加载不同的语言环境，请在 load 语句中指定语言...

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

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

Google Charts: How to customize the Date format displayed on the axis?

javascript

charts

google-visualization