如何控制 google 可视化图表中的 haxis 数据格式？

Question

我在我的应用程序中使用 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 以数字显示？

Answer 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() 才能正确解释您的选项。

如何控制 google 可视化图表中的 haxis 数据格式？

How to control haxis dataformat in google visualization chart?

google-visualization