自定义轴

  1. Overview
  2. 术语
  3. 离散与连续
  4. 轴刻度
  5. 数字格式

概览

数据中的维度通常显示在轴上，包括水平轴和垂直轴。例如：面积图、条形图、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。
  • 对于连续轴，请将数据列类型设置为以下类型之一：number、date、datetime 或 timeofday。
间续 / 连续 第一列类型 示例
离散 string
连续模式 number
连续模式 date

轴刻度

您可以使用 scaleType 选项设置轴的比例。例如，要将纵轴的刻度设置为对数刻度，请使用以下选项：

  vAxis: {
        scaleType: 'log'
  }

下面的折线图分别以线性（标准）刻度和对数刻度显示了世界人口的增长情况。

如果数据包含零值或负值，您可以使用 scaleType: 'mirrorLog' 选项来绘制这些点。在镜像对数刻度中，负数的绘制值减去该数字的绝对值的对数。接近 0 的值按线性刻度绘制。

以下示例显示了同时采用镜像对数刻度和线性刻度绘制的斐波那契数正数和负数。

数字格式

您可以使用 hAxis.format 和 vAxis.format 控制标签编号的格式。例如，{hAxis: { format:'#,###%'} } 会针对值 10、7.5 和 0.5 显示“1,000%”“750%”和“50%”值。您还可以提供以下任意预设：

  • {format: 'none'}：显示不带格式的数字（例如，8000000）
  • {format: 'decimal'}：显示带千位分隔符的数字（例如，8,000,000）
  • {format: 'scientific'}：以科学计数法显示数字（例如，8e6）
  • {format: 'currency'}：以本地货币显示数字（例如，$8,000,000.00）
  • {format: 'percent'}：以百分比的形式显示数字（例如，800,000,000%）
  • {format: 'short'}：显示缩写数字（例如，800 万）
  • {format: 'long'}：将数字显示为完整字词（例如，800 万）

在下面的图表中，您可以选择预设：

上方图表的完整网页如下。

 

<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 格式将把 8,000,000 呈现为“800 万”）时，您可以在加载 Google 图表库时指定语言代码，将字符串本地化为其他语言。例如，要将“8million”改为俄语“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>