Question

我在创建图表的柱形图包中使用谷歌api图表。但在此图表中不能删除y轴线，也不能设置y轴格式。

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["columnchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
            width: 400, 
            height: 240, 
            legend: 'none',
            bar: { groupWidth: '50%' }

        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Answer 1

不要使用'columnchart'包 - 它已经过时并且已弃用。请改用较新的'corechart'包：

google.load('visualization', '1', {packages:['corechart']});

这使您能够以您希望的方式格式化图表所需的选项。查看完整的选项列表here。默认情况下，使用'corechart'包，示例代码中的y轴上不会有一行。您可以使用vAxis.format选项格式化轴值：

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

Answer 2

在此谷歌api图表中使用columnchart包。柱形图包是最古老的包之一，在这个包中没有更多的自定义。所以我们没有设置y轴格式并删除y轴边界线。

google.load（“visual”，“1”，{packages：['columnchart']}）;

最新版本的google api图表包是核心图表包。

google.load（'visual'，'1'，{packages：['corechart']}）;

假设我们正在使用此包。可以用于y轴格式并删除y轴边界线。

Answer 3

    function drawVisualization() {
          // Create and populate the data table.
          var data = google.visualization.arrayToDataTable([
            ['x', 'Report'],
            ['2013-12-20 10:20:30',   1],
            ['2013-12-20 10:30:30',   2],
            ['2013-12-20 12:20:30',   4],
            ['2013-12-21 10:20:30',   5],
            ['2013-12-21 20:20:30',   2],
            ['2013-12-22 20:20:30',   2],

          ]);

          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById('visualization')).
              draw(data, {
                          width: 500, height: 400,
                         vAxis: {title: "Health Chart",ticks: [{v:5, f:"Healthy"},{v:2, f:"Unhealthy"},{v:4, f:"Better"},{v:1, f:"Not Good"}]},}
                  );
        }
        google.setOnLoadCallback(drawVisualization);

  google.setOnLoadCallback(drawVisualization);

您可以在Google代码游乐场上运行此代码（即https://code.google.com/apis/ajax/playground/#line_chart）并根据您的选项更改vAxis。

如何在google api图表中设置y轴格式并删除columnchart包的y轴边界线？

3 个答案:

如何在google api图表中设置y轴格式并删除co​​lumnchart包的y轴边界线？

3 个答案:

如何在google api图表中设置y轴格式并删除columnchart包的y轴边界线？