구글 차트에서 라인을 백분율로 표시합니다.

Question

저는 Google 차트에서 차트를 만들고 있는데, 백분율 변화에 따라 라인을 표시하려고합니다. 그래서 매우 다른 두 가지 라인으로 세부 사항을 볼 수 있습니다. 값. 로그 스케일은 트릭을 수행하지 않았습니다. 현재 로그 배율에서는 다음과 같습니다. 그래서 그들은 둘 다 Zero에서 시작하고 다음 값은 마지막 포인트에서 백분율로 변경됩니다.

는

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>