如何控制谷歌可视化图表中的haxis数据格式？答案

【问题标题】：How to control haxis dataformat in google visualization chart?如何控制谷歌可视化图表中的haxis数据格式？
【发布时间】：2015-03-24 12:49:09
【问题描述】：

我在我的应用程序中使用 Google 可视化图表来绘制折线图。它工作得很好，除了 hAxis 中的一件事，输入的数字将自身转换为数千，如下所示。我知道这种情况正在发生，因为我试图显示大量数字，但我仍然想知道是否有办法解决这个问题？

代码

<html>
<head>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1.1', {packages: ['line']});
    google.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Degree Level');  
      data.addColumn('number', 'Graduate or professional degree');
      data.addColumn('number', "Bachelor's degree");
      data.addColumn('number', "Associate's degree");
      data.addColumn('number', "High school or vocational training");

      data.addRows([
        [2,  39758,93179, 78578,49141],
        [3,  100747, 300646, 220982,100456],
        [4,  49964,   68022, 21092,6943],
        [5,  150370, 124868, 27120,8204]
      ]);

      var options = {
        chart: {
          title: 'Education Report',
          subtitle: 'distributed by experience'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="linechart_material"></div>
</body>
</html>

输出

有人可以告诉我如何使 hAxis 显示为数字吗？

【问题讨论】：

标签： google-visualization

【解决方案1】：

有两种解决方案可以获得您想要的格式。

您要么使用 corecharts 包的版本 1：

所以像这样加载包：

// instead of : google.load('visualization', '1.1', {packages: ['line']});
google.load('visualization', '1', { packages: ['corechart'] });

并像这样调用您的图表：

// instead of : var chart = new google.charts.Line(document.getElementById('linechart_material'));
var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));

你会得到你想要的。

查看demo jsfiddle here。

或者，

像这样使用 1.1 版的包（你已经在你的例子中做了）：

google.load('visualization', '1.1', {packages: ['line']});

然后在图表选项中指定 vAxis 格式，如下所示：

vAxis: { format: '###,###,###' },

并以这种方式加载图表，以便考虑 vAxis 设置：

chart.draw(data, google.charts.Line.convertOptions(options));

这也行。

查看demo jsfiddle here。

这里的问题是定义选项的方式已经从 v.1 更改为 v.1.1。因此，如果您想使用 v.1.1 包，您必须调用 google.charts.Line.convertOptions() 才能正确解释您的选项。

【讨论】：