谷歌圖表格式化單元格的百分比

Question

我想格式化谷歌圖表表格中的單元格作爲百分比字段。

對於它的工作原理與列：

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

但據我可以讀沒有可能爲一排，所以我想這樣做對細胞水平 - 這可能嗎？

是否與setProperty我需要做到這一點，什麼是格式化語法。

Answer 1

您可以使用NumberFormat的formatValue方法來獲取格式化字符串
，而不是應用到整個列

那麼你可以在數據表細胞
改變顏色，使用setProperty改變手動setFormattedValue小區的物業'style'
圖表必須在事後繪製

- 或 -

當圖表的'ready'事件觸發，你可以使用DOM
的Table圖表產生正常組HTML的標籤<table>

下面是一個工作片斷更改單元格的值，表明這兩種方法...

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>