Question

我正在尝试为饼图的工具提示值提供格式化数据。我的数据由名称和大小（大小是字节数）组成。

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

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

当前错误

所需

Type dynamic_type = Type.GetType("CurrentAssembly.shop_info, CurrentAssembly");
var dyn_object = mySession.Get<dynamic_type>(object_id);

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>

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

1 个答案: