javascript - 如何格式化折线图谷歌图表 Material 上的轴？

Question

我在格式化 Material 图表的轴时遇到问题。

如果我想用美元符号格式化我的垂直轴，我会使用“经典”折线图 {vAxes: { 0: {title: 'Amount',format: '$#,##'}}} 让它看起来像这样:

我本以为我可以在阅读后更改为 {axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } } Material 图表存在一些小文档，但这根本不起作用。

此外，我在横轴上有日期，默认格式为 sh*t!我也不知道如何覆盖该格式。请注意，这是在我尝试格式化的轴上。

对于水平方向，我尝试设置 hAxis: {format:'YYYY-MM-DD'} 但没有成功。

我的主要问题是:有人知道 Material 图表的完整文档吗？我一直在使用的是 this .

第二个问题:如何格式化坐标轴上的值？

Answer 1

这些选项在 Material 图表上根本不可用...

参见 --> Tracking Issue for Material Chart Feature Parity #2143

---

当使用 Core 图表时，有一个选项可以使图表“接近”Material 图表...

theme: 'material'

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

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('date','Date');
  data.addColumn('number','Value');
  data.addRows([
    [new Date(2017, 1, 12), 250],
    [new Date(2017, 1, 13), 200],
    [new Date(2017, 1, 14), 150]
  ]);

  var options = {
    hAxis: {
      format: 'yyyy-MM-dd'
    },
    theme: 'material',
    vAxis: {
      format: '$#,##',
      title: 'Amount'
    }
  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>