Wie formatiere ich Google-Visualisierungs-Tabellenzellen mithilfe der Diagramm-Wrapper-Funktion bedingt?

Question

Ich bin neu in der Welt der Google Visualization API und hoffte, dass jemand mir helfen kann, die Farbe von Zellen in meiner Google Visualisierungstabelle bedingt zu formatieren. Ich war in der Lage, das Zahlenformat zu ändern, das verschiedene Spalten anzeigen, aber ich habe kein Glück mit der Farbformatierung. Ich verwende die arrayToDataTable- und chartwrapper-Funktionen, um einige Daten anzuzeigen, die ich aus einer Tabelle abgefragt habe.

Muss ich etwas mit der colorFormat-Variablen oder der chartwrapper-Funktion ändern, die die Formatierung nicht akzeptiert? Vielen Dank im Voraus!

function drawDashboard(response) { 
 
    $('#main-heading').addClass("hidden"); 
 
    if (response == null) { 
 
    alert('Error: Invalid source data.') 
 
    return; 
 
    } else { 
 

 
    // Transmogrify spreadsheet contents (array) to a DataTable object 
 
    var responseObjects = JSON.parse(response); 
 
    console.log(responseObjects); 
 
    var testData = []; 
 
    for (var i = 1; i < responseObjects.length; i++) { 
 
     responseObjects[i][0] = new Date(responseObjects[i][0]); 
 
    } 
 
    var data = google.visualization.arrayToDataTable(responseObjects, false); 
 
    console.log(data); 
 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div')); 
 

 
    var percentFormatter = new google.visualization.NumberFormat({ 
 
     pattern: '#,###.##%' 
 
    }); 
 
    percentFormatter.format(data, 1); 
 
    percentFormatter.format(data, 3); 
 

 
    var numberFormatter = new google.visualization.NumberFormat({ 
 
     pattern: '#.##' 
 
    }); 
 
    numberFormatter.format(data, 7); 
 
    numberFormatter.format(data, 8); 
 

 
    var colorFormatter = new google.visualization.ColorFormat(); 
 
    colorFormatter.addRange(0, 5, 'white', 'orange'); 
 
    colorFormatter.addRange(20000, 6, 'red', '#33ff33'); 
 
    colorFormatter.format(data, 8); 
 
    colorFormatter.format(data, 9); 
 
    colorFormatter.format(data, 10); 
 
    colorFormatter.format(data, 11); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
     'chartType': 'Table', 
 
     'containerId': 'table-div', 
 
     'view': { 
 
     'columns': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15] 
 
     }, 
 
    }); 
 

 
    var donutSlider = new google.visualization.ControlWrapper({ 
 
     'controlType': 'DateRangeFilter', 
 
     'containerId': 'slider-div', 
 
     'options': { 
 
     'filterColumnLabel': 'Date' 
 
     } 
 
    }); 
 

 
    // Set up dependencies between controls and charts 
 
    dashboard.bind(donutSlider, [table]); 
 
    // Draw all visualization components of the dashboard 
 
    dashboard.draw(data); 
 
    } 
 
}

Answer 1

sieht aus wie Sie das mit dem Formatierer korrekt
aber die Parameter verwenden sind ein wenig aus

auch allowHtml: true in den Tabellenoptionen benötigen

siehe folgendes Beispiel mit der verknüpften Tabelle ...

google.charts.load('current', { 
 
    callback: function() { 
 
    var query = new google.visualization.Query(
 
     'https://docs.google.com/spreadsheets/d/1TBTX_OmNUiq_J0uXEstkxeD6mtImi7BAPWKDBAQIiFA/edit#gid=0' 
 
    ); 
 
    query.setQuery("select *"); 
 
    query.send(drawDashboard); 
 
    }, 
 
    packages: ['controls', 'table'] 
 
}); 
 

 
function drawDashboard(response) { 
 
    if (response.isError()) { 
 
    console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
 
    return; 
 
    } 
 

 
    var data = response.getDataTable(); 
 

 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div')); 
 

 
    var percentFormatter = new google.visualization.NumberFormat({ 
 
    pattern: '#,###.##%' 
 
    }); 
 
    percentFormatter.format(data, 1); 
 
    percentFormatter.format(data, 3); 
 

 
    var numberFormatter = new google.visualization.NumberFormat({ 
 
    pattern: '#.##' 
 
    }); 
 
    numberFormatter.format(data, 7); 
 
    numberFormatter.format(data, 8); 
 

 
    var colorFormatter = new google.visualization.ColorFormat(); 
 
    colorFormatter.addRange(-20000, 0, 'white', 'orange'); 
 
    colorFormatter.addRange(20000, null, 'red', '#33ff33'); 
 
    colorFormatter.format(data, 8); 
 
    colorFormatter.format(data, 9); 
 
    colorFormatter.format(data, 10); 
 
    colorFormatter.format(data, 11); 
 

 
    var table = new google.visualization.ChartWrapper({ 
 
    chartType: 'Table', 
 
    containerId: 'table-div', 
 
    options: { 
 
     allowHtml: true 
 
    } 
 
    }); 
 

 
    var donutSlider = new google.visualization.ControlWrapper({ 
 
    controlType: 'DateRangeFilter', 
 
    containerId: 'slider-div', 
 
    options: { 
 
     filterColumnLabel: 'Date' 
 
    } 
 
    }); 
 

 
    dashboard.bind(donutSlider, [table]); 
 
    dashboard.draw(data); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="dashboard-div"> 
 
    <div id="slider-div"></div> 
 
    <div id="table-div"></div> 
 
</div>