javascript - 设置要下降的列的基值

Question

是否可以让正数的列下降？

我需要创建一个条形图，底数为 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 charts。

Answer 1

很简单，设置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'
      }, {
          type: 'string',
          role: 'style',
          calc: function (dt, row) {
            var color;
            if (dt.getValue(row, 1) < 100) {
              color = 'red';
            } else {
              color = 'blue';
            }
            return color;
          }
      }
  ]);

  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>

---

注意:

jsapi 加载器已过时，不应再使用。

相反，使用loader.js，这只会改变load语句。
看上面的片段……