Google Visualization Barformat Optionen

Question

Ich arbeite vor kurzem an Google Tabelle Tabelle. Jetzt habe ich einige Probleme beim Einstellen des BarFormat. Ich bin in der Lage, Min- und Max-Wert für den Barbereich, , aber es ist nur für die gesamte Tabelle. Gibt es eine Möglichkeit, den Bereich separat einzustellen? Und die andere Frage ist, wofür stehen 'v' und 'f' in der zweiten Spalte? Unten ist das Beispiel.

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%'}); 
    } 

Danke für die Hilfe ~!

Answer 1

1)

Sie Literalwerte verwenden können Zellen in den Google-Datentabelle zu füllen ('Mike', 10000, etc ...)

oder nutzen ihre Objekt Notation, wo ...
v: = Wert
f: = formatierten Wert

whic h align mit Datentabelle Methoden ...

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

2)

wie erwähnt, das format Verfahren das Format auf die gesamte Tabelle gilt

formatieren mit einem anderen min an d max für jede Zeile,

Sie könnten eine neue Datentabelle für jede Zeile erstellen,

Format die neue Datentabelle,

dann fügen Sie alle formatierten Zeilen an einen anderen endgültigen Datentabelle

siehe folgende Arbeits Schnipsel ...

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>