Question

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

代码

<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>

输出 enter image description here

有人可以告诉我如何才能让hAxis以数字显示？

Answer 1

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

您使用的是核心图表包的第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（）才能正确解释选项。

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

1 个答案: