Google Charts - 円グラフのカスタムツールチップ値

Question

円チャートのツールチップ値の書式設定されたデータを表示しようとしています。私のデータは名前とサイズで構成されています（サイズはバイト数です）。

デフォルトのツールチップでは、サイズ値にカスタムフォーマッタを使用できません。文字列を使用すると、パーセント値と凡例の名前がツールチップに表示されなくなります。これを行う方法はありますか？

私は伝説の色、名前とパーセンテージを維持したいのですが、値がより読みやすい形式に

理想

現在の間違った

をフォーマットしました

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

... setCell

ツールチップの最後の引数でフォーマットされた値が作業スニペット、以下を参照してください。デフォルト

でフォーマットされた値が表示されます

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>

を提供