Google Charts - 饼图的自定义工具提示值-Java 学习之路

我试图呈现饼图的工具提示值的格式化数据 . 我的数据由名称和大小（大小是字节数）组成 .

默认工具提示不允许我使用自定义格式化程序作为大小值 . 如果我使用字符串，我会在工具提示中丢失百分比值和图例名称 . 有没有办法做到这一点？

我想维护图例颜色，名称和百分比，但将值格式化为更易读的形式

Current Wrong

Current Tooltip

Desired

Desired Tooltip

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];
};

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>

回复于 2024-05-06T22:03:10+08:00

Google Charts - 饼图的自定义工具提示值

1 回答

相关问题