Googleグラフの表の書式設定セルの割合が

Question

Googleグラフ表のセルの割合をパーセント値として設定しようとしています。それはで動作する列については

：

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

しかし、これまで私が読むことができるよう、行のための可能性はない、したがって、私は、細胞レベルでそれをやりたい - 可能ということでしょうか？

ありがとうございますsetProperty私はそれを行う必要があり、書式設定の構文は何ですか？

Answer 1

あなたがフォーマットされた文字列
を取得するためにNumberFormatのformatValue方法を使用することができます全体ではなく列に

を適用し、その後、手動setFormattedValue
のDataTableセルの変化にsetPropertyを使用して、色を変更することができますセルの'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>