如何在折线图谷歌图表材料上格式化轴?

时间:2017-02-15 13:31:21

标签: javascript charts google-visualization

我在格式化材料图表的轴时遇到了问题。

使用" classic"如果我想用美元符号格式化我的垂直轴,我会这样做 {vAxes: { 0: {title: 'Amount',format: '$#,##'}}} 看起来像这样:enter image description here

在阅读了材料图表中存在的小文档之后,我会认为我可以更改为{axes: {y: {Amount: {format:'$#,##', label:'Amount'} } } },但这根本不起作用。

另外,我在横轴上有日期,默认格式为sh * t!我无法弄清楚如何覆盖这种格式。请注意,这是我自己想要格式化的轴。

水平我尝试设置hAxis: {format:'YYYY-MM-DD'}但是没有效果。

我的主要问题是:有没有人知道材料图表的完整文档?我一直在使用的是this

第二个问题:如何格式化轴上的值?

1 个答案:

答案 0 :(得分:2)

这些选项根本不适用于材料图表...

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

当使用核心图表时,有一个选项可以让图表“关闭”到材料图表...

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>