%로 표시된 Google 차트 표 서식 지정 셀

Question

Google 차트 표의 셀을 백분율 필드로 포맷하려고합니다. 그것이 작동하는 열 들어

는 :

var flow_format2 = new google.visualization.NumberFormat({suffix: '%', negativeColor: 'red', negativeParens: true, fractionDigits: 0}); 

그러나 지금까지의 내가 행에 대한 가능성이없는 읽을 수있는, 그러므로 나는 세포 수준에서 그것을 할 싶습니다 -하는 것이 가능할까요?

함께 하시겠습니까? setProperty 형식화 구문은 무엇입니까?

Answer 1

당신은 전체 열 다음

에 적용되는 것이 아니라 형식 문자열
를 얻을 수 NumberFormat의 formatValue 방법을 사용 할 수 있습니다
은, 색상을 변경 변경 setProperty를 사용하는 DataTable을 셀 수 수동으로 setFormattedValue 셀의 'style' 재산
차트 나중에

또는 -

을 그려야합니다

차트의 'ready' 이벤트가 발생, 당신은 ... 시연, DOM을
Table 차트 <table> 태그

다음 HTML의 정상적인 세트를 생성하는 작업 조각 인을 사용하여 셀 값을 변경할 모두에 접근 할 수있을 때

google.charts.load('current', { 
 
    callback: function() { 
 
    var dataTable = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Name', type: 'string'}, 
 
     {label: 'Amount', type: 'number'}, 
 
     ], 
 
     rows: [ 
 
     {c:[{v: 'Adam'}, {v: -1201}]}, 
 
     {c:[{v: 'Mike'}, {v: 2235}]}, 
 
     {c:[{v: 'Stephen'}, {v: -5222}]}, 
 
     {c:[{v: 'Victor'}, {v: 1288}]}, 
 
     {c:[{v: 'Wes'}, {v: -6753}]} 
 
     ] 
 
    }); 
 

 
    var container = document.getElementById('chart_div'); 
 
    var tableChart = new google.visualization.Table(container); 
 

 
    var patternFormat = { 
 
     suffix: '%', 
 
     negativeColor: '#FF0000', 
 
     negativeParens: true, 
 
     fractionDigits: 0 
 
    }; 
 

 
    // create the formatter 
 
    var formatter = new google.visualization.NumberFormat(patternFormat); 
 

 
    // format cell - first row 
 
    dataTable.setFormattedValue(0, 1, formatter.formatValue(dataTable.getValue(0, 1))); 
 
    if (dataTable.getValue(0, 1) < 0) { 
 
     dataTable.setProperty(0, 1, 'style', 'color: ' + patternFormat.negativeColor + ';'); 
 
    } 
 

 
    google.visualization.events.addOneTimeListener(tableChart, 'ready', function() { 
 

 
     // format cell via DOM - third row 
 
     var tableCell = container.getElementsByTagName('TR')[3].cells[1]; 
 
     tableCell.innerHTML = formatter.formatValue(dataTable.getValue(2, 1)); 
 
     if (dataTable.getValue(2, 1) < 0) { 
 
     tableCell.style.color = patternFormat.negativeColor; 
 
     } 
 

 
    }); 
 

 
    tableChart.draw(dataTable, { 
 
     allowHtml: true 
 
    }); 
 
    }, 
 
    packages: ['table'] 
 
});

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