谷歌图表 - 将工具提示添加到彩色柱形图

Google Charts - Adding Tooltip to Colorized Column Chart

本文关键字：添加 彩色 柱形图 工具提示 谷歌      更新时间：2023-09-26

我用谷歌图表创建了一个柱形图，该柱形图使用以下帖子为每列分配了不同的颜色： 为谷歌图表中的每个条形分配不同的颜色

但是现在我正在尝试弄清楚如何自定义每列的工具提示，以除了百分比之外还包括用户数量，因此"raw_data[i][1]"

我希望它看起来像"70%（80 个用户）"

我知道有"data.addColumn（{type：'number'，role：'tooltip'}）;"，但我很难理解如何为这个用例实现它。

  function drawAccountsChart() {
    var data = new google.visualization.DataTable();

    var raw_data = [
        ['Parents', 80, 160],
        ['Students', 94, 128],
        ['Teachers', 78, 90],
        ['Admins', 68, 120],
        ['Staff', 97, 111]
    ];
    data.addColumn('string', 'Columns');
    for (var i = 0; i  < raw_data.length; ++i) {
        data.addColumn('number', raw_data[i][0]);
    }
    data.addRows(1);
    for (var i = 0; i  < raw_data.length; ++i) {    
        data.setValue(0, i+1, raw_data[i][1]/raw_data[i][2]*100);
    }

    var options = {
                   height:220,
                   chartArea: { left:30, width: "70%", height: "70%" },
                   backgroundColor: { fill:"transparent" },
                   tooltop:{ textStyle: {fontSize: "12px",}},
                   vAxis: {minValue: 0}
    };
    var formatter = new google.visualization.NumberFormat({
        suffix: '%',
        fractionDigits: 1
    });
    formatter.format(data, 1);
    formatter.format(data, 2);
    formatter.format(data, 3);
    formatter.format(data, 4);
    formatter.format(data, 5);
    var chart = new google.visualization.ColumnChart(document.getElementById('emailAccountsChart'));
    chart.draw(data, options);
  }

您只需为每个数据列添加一个工具提示列，并将工具提示数据与常规数据一起填充：

function drawAccountsChart() {
    var data = new google.visualization.DataTable(),
        raw_data = [
            ['Parents', 80, 160],
            ['Students', 94, 128],
            ['Teachers', 78, 90],
            ['Admins', 68, 120],
            ['Staff', 97, 111]
        ],
        value,
        row = [null],
        formatter = new google.visualization.NumberFormat({
            suffix: '%',
            fractionDigits: 1
        }),
        options = {
            height:220,
            chartArea: { left:30, width: "70%", height: "70%" },
            backgroundColor: { fill:"transparent" },
            tooltop:{ textStyle: {fontSize: "12px",}},
            vAxis: {minValue: 0}
        },
        chart = new google.visualization.ColumnChart(document.getElementById('emailAccountsChart'));
    data.addColumn('string', 'Columns');
    for (var i = 0; i  < raw_data.length; ++i) {
        data.addColumn('number', raw_data[i][0]);
        data.addColumn({type:'string', role:'tooltip'});
        value = raw_data[i][1] / raw_data[i][2] * 100;
        row.push(value);
        row.push(formatter.formatValue(value) + ' (' + raw_data[i][1] + ' Users)');
    }
    data.addRow(row);
    chart.draw(data, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawAccountsChart});

请参阅此处的示例：http://jsfiddle.net/asgallant/NGr5k/

相关文章：