javascript - 使用双 x 轴(十进制)在谷歌条形图上格式化数字

Question

如何在带有双 x 轴的 google 条形图上设置数值格式？带有标签支持的顶部轴应至少有四位小数，如工具提示中显示的值。

我试过的是this方法，但它似乎不起作用。

我的代码:

data.addColumn('string', 'RuleName');
        data.addColumn('number', 'Lift');
        data.addColumn('number', 'Support');


        for (var i = 0; i < chartsdata.length; i++) {
            data.addRow([rule, Lift,Support)]);
        }

        // format numbers in second column to 5 decimals
        var formatter = new google.visualization.NumberFormat({
            pattern: '#,##0.00000'
        }); // This does work, but only for the value in the tooltip.

        formatter.format(data, 2);

        // Passing in some options    
        var chart = new google.charts.Bar(document.getElementById('barChart'));
        var options = {

            title: "Association Rules by lift and support",
            bars: 'horizontal',
            series: {
                0: { axis: 'Lift', targetAxisIndex: 0, },
                1: { axis: 'Support', targetAxisIndex: 1}

            },

            axes: {
                x: {
                    Lift: { label: 'Lift', format: '0,000' //Doesn't work,  }, // Bottom x-axis.
                    Support: { side: 'top', label: 'Support' } // Top x-axis.
                }
            }, ..........

我也尝试过谷歌文档中的这种方法:

series:{hAxes:{1:{title:'abc', format: '0,0000'}}

如有任何帮助，我们将不胜感激!

Answer 1

Material 图表不支持多个选项
见 --> Tracking Issue for Material Chart Feature Parity

虽然format未列出，有几个选项不支持 --> {hAxis,vAxis,hAxes.*,vAxes.*}

这可能是问题所在
注意:以上选项应该是独立的，不包含在 series 中选项，
如问题所示(我也尝试过...)

您可以使用 hAxis.format 更改两种 x 轴格式
但不要以为你只能改变一个

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['bar']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'RuleName');
  data.addColumn('number', 'Lift');
  data.addColumn('number', 'Support');
  for (var i = 0; i < 10; i++) {
    data.addRow([i.toString(), i+2, i+3]);
  }

  var formatter = new google.visualization.NumberFormat({
    pattern: '#,##0.00000'
  });
  formatter.format(data, 2);

  var chart = new google.charts.Bar(document.getElementById('barChart'));
  var options = {
    chart: {
      title: 'Association Rules by lift and support'
    },
    bars: 'horizontal',
    series: {
      0: {axis: 'Lift'},
      1: {axis: 'Support'}
    },
    axes: {
      x: {
        Lift: {label: 'Lift'},
        Support: {side: 'top', label: 'Support'}
      }
    },
    hAxis: {
      format: '#,##0.00000'
    },
    height: 320
  };
  chart.draw(data, google.charts.Bar.convertOptions(options));
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barChart"></div>