Google可視化Barformat選項

Question

我正在使用Google的Table Chart最近。 現在我在設置BarFormat時遇到了一些問題。 我可以設置酒吧範圍的最小值和最大值， 但它僅適用於整個表格。 有什麼方法可以單獨設置範圍嗎？ 另一個問題是第二列中的'v'和'f'代表什麼？ 下面是例子。

function drawTable() { 
    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Salary'); 
    data.addColumn('boolean', 'Full Time Employee'); 
    data.addColumn('number', 'QQ'); 
    data.addRows([ 
     ['Mike', {v: 10000, f: '$10,000'}, true,10000], 
     ['Jim', {v:8000, f: '$8,000'}, false,8000], 
     ['Alice', {v: 12500, f: '$12,500'}, true,12500], 
     ['Bob', {v: 7000, f: '$7,000'}, true,7000] 
    ]); 

    var table = new google.visualization.Table(document.getElementById('table_div')); 
    var formatter = new google.visualization.BarFormat({width: 100,colorPositive:'red',colorNegative:'blue',max:20000,min:0}); 
    formatter.format(data, 3); // Apply formatter to second column 
    table.draw(data, {allowHtml: true,showRowNumber: true, width: '100%', height: '50%'}); 
    } 

感謝您的幫助〜！

Answer 1

1）

您可以使用文字值來填充在谷歌的數據表（'Mike'，10000等細胞......）

或使用他們的對象符號，其中...
v: =值
f: =格式化值

whic用數據表的方法ħ對準...

getValue(row, col)和setValue(row, col, val)
getFormattedValue(row, col)setFormattedValue(row, col, formatVal)和
setCell(row, col, val, formatVal)

2）

如所指出的，format方法適用的格式對整個表

使用不同的格式min d max對於每一行，

您可以創建爲每行一個新的數據表，

格式的新數據表，

那麼所有的格式化行添加到另一個最終數據表

看到下面的工作片段...

google.charts.load('current', { 
 
    callback: drawTable, 
 
    packages:['table'] 
 
}); 
 

 
function drawTable() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('number', 'Salary'); 
 
    data.addColumn('boolean', 'Full Time Employee'); 
 
    data.addColumn('number', 'QQ'); 
 

 
    // data table used to join rows back together 
 
    var joinData = data.clone(); 
 

 
    data.addColumn('number', 'min'); 
 
    data.addColumn('number', 'max'); 
 
    data.addRows([ 
 
    ['Mike', {v: 10000, f: '$10,000'}, true, 10000, 0, 20000], 
 
    ['Jim', {v: 8000, f: '$8,000'}, false, 8000, 0, 16000], 
 
    ['Alice', {v: 12500, f: '$12,500'}, true, 12500, 0, 25000], 
 
    ['Bob', {v: 7000, f: '$7,000'}, true, 7000, 0, 14000] 
 
    ]); 
 

 
    var rowData = []; 
 
    for (var r = 0; r < data.getNumberOfRows(); r++) { 
 
    // create view for each data row 
 
    var view = new google.visualization.DataView(data); 
 
    view.setRows([r]); 
 
    var viewData = view.toDataTable(); 
 

 
    // format new data table 
 
    var formatter = new google.visualization.BarFormat({ 
 
     width: 100, 
 
     colorPositive: 'red', 
 
     colorNegative: 'blue', 
 
     max: data.getValue(r, 5), 
 
     min: data.getValue(r, 4) 
 
    }); 
 
    formatter.format(viewData, 3); 
 

 
    // add values to join table 
 
    var row = []; 
 
    for (var c = 0; c < joinData.getNumberOfColumns(); c++) { 
 
     row.push({ 
 
     v: viewData.getValue(0, c), 
 
     f: viewData.getFormattedValue(0, c) 
 
     }); 
 
    } 
 
    joinData.addRow(row); 
 
    } 
 

 
    var table = new google.visualization.Table(document.getElementById('table_div')); 
 
    table.draw(joinData, { 
 
    allowHtml: true, 
 
    showRowNumber: true, 
 
    width: '100%', 
 
    height: '50%' 
 
    }); 
 
}

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