自定义轴

概览

数据中的维度通常以横向和纵向显示在上。包括面积图条形图K 线图表柱形图组合图表折线图阶梯面积图散点图

创建带轴的图表后,您可以自定义某些属性:

  • 离散与连续
  • 方向 - 您可以使用 hAxis/vAxis.direction 选项自定义方向。
  • 标签位置和样式 - 您可以使用 hAxis/vAxis.textPosition 和 hAxis/vAxis.textStyle 选项来自定义标签位置和样式。
  • 轴标题文本和样式 - 您可以使用 hAxis/vAxis.title 和 hAxis/vAxis.titleTextStyle 选项自定义轴标题文本和样式。
  • 轴缩放 - 您可以使用 hAxis/vAxis.logScale 或 hAxis/vAxis.scaleType 选项将轴的缩放比例设置为对数(对数)缩放比例。
  • 如需查看轴配置选项的完整列表,请参阅特定图表的文档中的 hAxis 和 vAxis 选项。

术语

长/短轴:

  • “长”轴是沿图表自然方向的轴。对于折线图、面积图、柱形图、组合图表、阶梯面积图和 K 线图,这是横轴。对于条形图,它是垂直的。散点图和饼图没有长轴。
  • 短轴就是另一轴。

离轴/连续轴:

  • 离散轴具有有限数量的均匀分布的值,称为类别。
  • 连续轴具有无限可能值。

离散与连续

图表的长轴可以是离散的,也可以是连续的。使用离散轴时,每个数据系列的数据点会根据其行索引在整个轴上均匀分布。使用连续轴时,数据点的位置将取决于其网域值。

标签也有所不同。在离散轴中,类别名称(在数据的“网域”列中指定)用作标签。在连续轴中,标签是自动生成的:图表显示均匀间隔的网格线,其中每个网格线根据其表示的值进行标记。

以下轴是连续的:

  • 气泡图的两个轴。
  • 短轴。

在折线图、面积图、柱形图、柱形图和 K 线图(以及仅包含此类系列的组合图表)中,您可以控制长轴的类型:

  • 对于离散轴,请将数据列类型设置为 string
  • 对于连续轴,请将数据列类型设置为 numberdatedatetimetimeofday 之一。
离散 / 连续 第一列类型 示例
离散 字符串
持续性 number
持续性 date

轴刻度

您可以使用 scaleType 选项设置轴的缩放比例。 例如,要将垂直轴的缩放比例设置为对数缩放,请使用以下选项:

  vAxis: {
        scaleType: 'log'
  }

以下折线图按线性(标准)和对数表示,显示了世界人口数量的增长情况。

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages:['corechart']});
      google.charts.setOnLoadCallback(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

使用使用文本的格式(例如,long 格式将呈现 800 万作为“800 万”)时,您可以在加载 Google Charts 库时指定语言代码,以将字符串本地化为其他语言。例如,要将“800 万”更改为俄语“8 миллиона”,请按照以下方式调用库:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>