Google图表 - 如何在vAxis上添加百分号作为单位?

时间:2016-11-16 18:58:10

标签: javascript jquery css google-visualization

如何在vAxis上显示每个可见y值后,谷歌图表显示百分比符号?现在我的图表只显示y轴上的整数值。

我研究了这个问题并找到了格式化程序,它只在我悬停在特定条形图(条形图上)时出现的工具提示中呈现百分号(%)。

如何让图表在条形图上的每个y轴值上显示%?

JS

 google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);
      $(document).ready(function(){
        $(window).resize(function(){
          drawStuff();
        });
      });
      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Product', 'Profitability'],
          ["Product 1", 12],
          ["Product 2", 11],
          ["Product 3", 10],
          ["Product 4", 9],
          ["Product 5", 8],
          ["Product 6", 7],
          ["Product 7", 6],
          ["Product 8", 5],
          ["Product 9", 4],
          ["Product 10", 3]
        ]);


        var formatter = new google.visualization.NumberFormat(
              {suffix: '%'});
        formatter.format(data, 1); // Apply formatter to second column

        var options = {
          title: 'LEADERS',
          width: '100%',
          colors: ["#949494"],
          legend: { position: 'none' },
          chart: { title: 'LEADERS',
                   //subtitle: 'popularity by percentage'
                 },
          bars: 'vertical', // Required for Material Bar Charts.
          axes: {
            x: {
              0: { side: 'bottom'} // Top x-axis.
            }
          },
          bar: { groupWidth: "90%" },
          vAxis: { minValue: 0, maxValue: 100, format: '#\'%\''}
        };

        var chart = new google.charts.Bar(document.getElementById('div'));
        chart.draw(data, options);
      };

修改...

以下编辑在y轴刻度标记后实现了所需的%单位创建,但我无法使其工作。

setTimeout(function(){
          $("text").each(function(){
            if ($.isNumeric($(this).text()))
            {
              $(this).text($(this).text() + "%");
            }
          });
        }, 250);

0 个答案:

没有答案