Google Charts - valeur de l'info-bulle personnalisée pour le camembert

Question

J'essaie de présenter des données formatées pour la valeur de l'info-bulle d'un camembert. Mes données consistent en un nom et une taille (taille est le nombre d'octets). L'info-bulle par défaut ne me permet pas d'utiliser un formateur personnalisé pour la valeur de la taille. Si j'utilise une chaîne, je perds la valeur Percentage et le nom de la légende dans l'info-bulle. Y a-t-il un moyen de faire cela?

Je veux maintenir la Légende couleur, nom et le pourcentage, mais ont la valeur formatée à une forme plus lisible

Mauvaise actuel

désiré

var entries = [{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}] 

var drawChart = function(entries, elementId) { 

    var options = { 
     width: "100%", 
     height: 148, 
     fontSize: 8, 
     tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' }, 
     legend: { position: 'right', textStyle: { fontSize: 10 } }, 
     chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" }, 
     sliceVisibilityThreshold: 0, 
     pieSliceText: 'none', 
     //pieHole: 0.4, 
    }; 

    var chart = new google.visualization.PieChart(document.getElementById(elementId)); 

    var data = new google.visualization.DataTable(); 

    data.addColumn('string', 'Name'); 
    data.addColumn('number', 'Size'); 
    data.addColumn({ type: 'string', role: 'tooltip' }); 

    data.addRows(entries.length); 
    var i = 0; 
    $.each(entries, function() { 

     data.setCell(i, 0, this.name);      
     data.setCell(i, 1, this.size); 
     // How to make this display correctly? 
     // If it stays like this i lose percentage and legend name from tooltip 
     data.setCell(i, 2, formatBytes(this.size)); 

     i++; 
    }); 

    chart.draw(data, options); 
} 

var formatBytes = function (bytes, precision) { 
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-'; 
    if (typeof precision === 'undefined') precision = 1; 
    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'], 
     number = Math.floor(Math.log(bytes)/Math.log(1024)); 
    return (bytes/Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number]; 
}; 

Answer 1

fournissent la valeur formatée dans le dernier argument de setCell

l'info-bulle affichera la valeur formatée par défaut

voir ci-dessous extrait de travail ...

google.charts.load('current', { 
 
    callback: function() { 
 
    drawChart([{name: 'Test1', size: 1234}, {name: 'Test2', size: 324563425}, {name: 'Test3', size: 321453452345}, {name: 'Test4', size: 789078}], 'chart_div'); 
 
    }, 
 
    packages: ['corechart'] 
 
}); 
 

 
var drawChart = function(entries, elementId) { 
 
    var options = { 
 
     width: "100%", 
 
     height: 148, 
 
     fontSize: 8, 
 
     tooltip: { textStyle: { bold: true, color: '#000000', fontSize: 13 }, showColorCode: true, isHtml: true, ignoreBounds: true, text: 'both', trigger: 'selection' }, 
 
     legend: { position: 'right', textStyle: { fontSize: 10 } }, 
 
     chartArea: { left: 5, top: 10, right: 5, bottom: 10, height: "148", width: "100%" }, 
 
     sliceVisibilityThreshold: 0, 
 
     pieSliceText: 'none', 
 
     //pieHole: 0.4, 
 
    }; 
 

 
    var chart = new google.visualization.PieChart(document.getElementById(elementId)); 
 

 
    var data = new google.visualization.DataTable(); 
 

 
    data.addColumn('string', 'Name'); 
 
    data.addColumn('number', 'Size'); 
 

 
    data.addRows(entries.length); 
 
    var i = 0; 
 
    $.each(entries, function() { 
 

 
     data.setCell(i, 0, this.name);      
 
     data.setCell(i, 1, this.size, formatBytes(this.size, 1)); 
 

 
     i++; 
 
    }); 
 

 
    chart.draw(data, options); 
 
} 
 

 
var formatBytes = function(bytes, precision) { 
 
    if (isNaN(parseFloat(bytes)) || !isFinite(bytes)) return '-'; 
 
    if (typeof precision === 'undefined') precision = 1; 
 
    var units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB'], 
 
     number = Math.floor(Math.log(bytes)/Math.log(1024)); 
 
    return (bytes/Math.pow(1024, Math.floor(number))).toFixed(precision) + ' ' + units[number]; 
 
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>