Google Chartsでラインをパーセンテージで表示

Question

私はGoogle Chartsでチャートを作成していますが、パーセンテージの変化によってラインを表示しようとしていますので、2つの異なるラインで詳細を見ることができます値。ログスケールはやりませんでした。 現在、ログスケールでは次のようになっています。 したがって、両方ともゼロで開始し、次の値は最後のポイントからのパーセント変化です。

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>