Question

我在谷歌图表中创建了一个图表，我试图通过它们的百分比变化来显示线条，因此您可以在两条不同的线条中看到具有非常不同值的细节。对数标度没有做到这一点。它目前看起来像对数比例。因此，它们都将从零开始，以下值将是从最后一点开始的百分比变化。

The Chart

Answer 1

您可以使用DataView中的计算列来绘制＆＃34;％更改＆＃34;

请参阅以下工作代码段...

2016年每个月都会使用一些随机数构建数据表

然后创建数据视图并使用setColumns方法

隐藏原始数字并显示＆＃34;％更改＆＃34;的公式

＆＃13;

google.charts.load('current', {
  callback: function () {
    drawChart();
    window.addEventListener('resize', drawChart, false);
  },
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['X', 'Y'],
    [new Date('01/01/2016'), 1000],
    [new Date('02/01/2016'), 1200],
    [new Date('03/01/2016'), 1400],
    [new Date('04/01/2016'), 1800],
    [new Date('05/01/2016'), 2600],
    [new Date('06/01/2016'), 5200],
    [new Date('07/01/2016'), 3900],
    [new Date('08/01/2016'), 3100],
    [new Date('09/01/2016'), 1900],
    [new Date('10/01/2016'), 2300],
    [new Date('11/01/2016'), 1200],
    [new Date('12/01/2016'), 1000]
  ]);

  var formatNumber = new google.visualization.NumberFormat({
    pattern: '#,##0.0%'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, {
    calc: function (dt, r) {
      if ((r === 0) || (dt.getValue(r - 1, 1) === 0)) {
        return null;
      }
      var change = (dt.getValue(r, 1) - dt.getValue(r - 1, 1)) / dt.getValue(r - 1, 1);
      return {
        v: change,
        f: formatNumber.formatValue(change)
      };
    },
    label: '% Change',
    type: 'number'
  }]);

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(view);
}

＆＃13;

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

＆＃13;

在Google Charts

1 个答案: