设置要降列的基值

问题描述 投票:0回答:1

是否可以使列的正数下降?

我需要创建一个以100%为基数的条形图,低于100%的条形图将下降,而高于100%的那些条形图将上升,所有值均为正。

Exemple chart

 <script type="text/javascript" src="http://www.google.com/jsapi"></script>

<script type="text/javascript">
    function init() {
        google.load("visualization", "1.1", {
            packages: ["corechart"],
            callback: 'grafico'
        });
    }

    function grafico() {

        var dados = <?php  echo $dadosGrafico; ?>;

        var data = google.visualization.arrayToDataTable(dados);

        var view = new google.visualization.DataView(data);

        view.setColumns([0,
            1, {
                type: 'string',
                role: 'annotation',
                sourceColumn: 1,
                calc: 'stringify'
            }
        ]);

        var options = {
            title: 'Percent state',
            vAxis: {
                title: 'Percent %',
            },
            hAxis: {
                title: 'State',
                textStyle: {
                    fontSize: 12,
                },
            },
            chartArea: {
                bottom: 300,
                left: 200,
                top: 90,
                width: 1200,
            },
            legend: 'bottom',
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

        chart.draw(view, options);
    }
</script>

来自银行的数据将采用这种格式。

$data = [
        [
            'Group', 'Percent'
        ],
        [
            '19', 78.011
        ],
        [
            '20', 120.4
        ],
        [
            '21', 94.996
        ],
        [
            '22', 100
        ],
    ];

我正在使用旧版的Google图表。

javascript charts google-visualization
1个回答
0
投票

简单,将y轴基线设置为100。

使用配置选项...

  vAxis: {
      baseline: 100,
  }

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

google.charts.load('current', {
  packages: ['corechart']
}).then(grafico);

function grafico() {
  var dados = [
      [
          'Group', 'Percent'
      ],
      [
          '19', 78.011
      ],
      [
          '20', 120.4
      ],
      [
          '21', 94.996
      ],
      [
          '22', 100
      ],
  ];;

  var data = google.visualization.arrayToDataTable(dados);

  var view = new google.visualization.DataView(data);

  view.setColumns([0,
      1, {
          type: 'string',
          role: 'annotation',
          sourceColumn: 1,
          calc: 'stringify'
      }
  ]);

  var options = {
      title: 'Percent state',
      vAxis: {
          baseline: 100,
          title: 'Percent %',
      },
      hAxis: {
          title: 'State',
          textStyle: {
              fontSize: 12,
          },
      },
      chartArea: {
          bottom: 300,
          left: 200,
          top: 90,
          width: 1200,
      },
      legend: 'bottom',
  };

  var chart = new google.visualization.ColumnChart(document.getElementById('chart'));

  chart.draw(view, options);
}
#chart {
  height: 600px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

NOTE:

jsapi加载程序已过时,不应再使用。

而是使用loader.js,这只会更改load语句。参见上面的代码段...

© www.soinside.com 2019 - 2024. All rights reserved.