谷歌图表双轴，设置格式

google chart double axis, set format

本文关键字：设置 格式 谷歌      更新时间：2023-09-26

我创建了一个谷歌条形图，有两个x轴。我的问题是，我似乎无法在底部轴上获得正确的格式，应该以百分比显示。

我尝试使用以下

axes:{{},{format:'#%'}}}

一般来说，在有意义的地方插入format:'#%'，但似乎什么都不起作用。

有人对此有想法吗？

请在此处查看整个代码：https://jsfiddle.net/laursen92/azr4kfn0/1/

      google.charts.load('current', {
    'packages': ['bar']
  });
  google.charts.setOnLoadCallback(drawStuff);
  function drawStuff() {
    var data = new google.visualization.arrayToDataTable([
      ['Slave number', 'Voltage', '%'],
      ['Slave 1', 12.15, 0.40],
      ['Slave 2', 12.18, 0.50],
      ['Slave 3', 11.80, 0.60],
      ['Slave 4', 13.12, 0.70],
    ]);
    var formatter = new google.visualization.NumberFormat({
      pattern: '##0.00'
    });
    var formatter2 = new google.visualization.NumberFormat({
      pattern: '##0%'
    });
    formatter.format(data, 1);
    formatter2.format(data, 2);
    var options = {
      width: 800,
      chart: {
        title: 'Status of slaves',
        subtitle: 'Overview of the voltage and SOC of connected slaves. '
      },
      bars: 'horizontal', // Required for Material Bar Charts.
      series: {
        0: {
          axis: 'voltage'
        }, // Bind series 0 to an axis named 'voltage'.
        1: {
          axis: 'percent'
        } // Bind series 1 to an axis named 'soc'.
      },
      axes: {
        x: {
          voltage: {
            side: 'top',
            label: 'Voltage'
          }, // Top x-axis.
          percent: {
            label: 'Percent',
          } // Bottom x-axis.
        }
      },
    };
    var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
    chart.draw(data, options);
  };

以下是fide的更新：https://jsfiddle.net/Balrog30/azr4kfn0/4/

我用我写的一个小代码笔对材料图表选项的更改进行了逆向工程，这些选项大多没有记录。您可以在此处找到：http://codepen.io/nbering/pen/Kddvge

以下是选项的格式：

var options = {
  axes: {
    x: {
      yourAxis: {
        format: {
          pattern: "#%"
        }
      }
    }
 };

--或者--

options.axes.x.yourAxis.format.pattern = "#%";
相关文章：