在Google图表中以百分比显示线条

Question

我在Google图表中创建图表，我试图通过它们的百分比变化显示线条，所以您可以在非常不同的两条不同线条中看到细节值。日志规模没有办法。 它目前看起来像这个日志规模。 因此，它们都将从零开始，以下值将是从最后一点开始的百分比变化。

The Chart

Answer 1

可以使用DataView内的计算列绘制“百分比变化”

见下工作片断......

数据表是建立与一些随机号码2016年每月

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

隐藏原来的号码，并为“百分比变化”

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); 
 
}

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