Google Charts - 向彩色柱形图添加工具提示答案

【问题标题】：Google Charts - Adding Tooltip to Colorized Column ChartGoogle Charts - 向彩色柱形图添加工具提示
【发布时间】：2013-11-05 21:26:53
【问题描述】：

我使用以下帖子创建了一个带有谷歌图表的柱形图，该图表为每列分配了不同的颜色：Assign different color to each bar in a google chart

但现在我正在尝试弄清楚如何自定义每列的工具提示，以除了百分比之外还包括用户数量，所以“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);
  }

【问题讨论】：

标签： javascript charts google-visualization

【解决方案1】：

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

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/

【讨论】：