Question

我使用谷歌图表创建了一个柱形图，其中使用以下帖子为每列分配了不同的颜色：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);
  }

Answer 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/

Google图表 - 向彩色柱形图添加工具提示

1 个答案: