在Google图表中使用列作为元数据-Java 学习之路

鉴于以下数据（来自Google Charts示例页面）：

var data = ['Year', 'Sales', 'Expenses'],
  ['2004',  1000,  400],
  ['2005',  1170,  460],
  ['2006',  660,   1120],
  ['2007',  1030,  540]

我怎样才能呈现一个显示销售额的折线图，但是在悬停时我会得到这个工具提示？

2006
Sales: 660
Expenses: 540

这是jsbin：

http://jsbin.com/fefod/1/edit?html,js,output

基本上我想使用第三列作为特定数据点的额外数据，而不是一个全新的系列 . 我已经读到我冷使用“注释”列但不确定如何使用它们 . 提前致谢 .

2 回答

使用'aggregationtarget'可以将多个数据选择汇总到工具提示中

下面给出一个例子

var options = {
    // Allow multiple simultaneous selections.
    selectionMode: 'multiple',
    // Trigger tooltips on selections.
    tooltip: { trigger: 'selection' },
    // Group selections by x-value.
    aggregationTarget: 'category',
  };

回复于 2024-05-22T05:35:34+08:00

实现您想要的方法是使用自定义工具提示 . 您可以创建一个自动构造这些的DataView，例如：

function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales', 'Expenses'],
        ['2004',  1000,      400],
        ['2005',  1170,      460],
        ['2006',  660,       1120],
        ['2007',  1030,      540]
    ]);

    var options = {
        title: 'Company Performance',
        tooltip: {
            isHtml: true
        }
    };

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        type: 'string',
        role: 'tooltip',
        properties: {
            html: true
        },
        calc: function (dt, row) {
            var year = dt.getFormattedValue(row, 0),
                sales = dt.getFormattedValue(row, 1),
                expenses = dt.getFormattedValue(row, 2);
            return '<div class="tooltip"><span class="tooltipHeader">Year</span>: ' + year + '
<span class="tooltipHeader">Sales</span>: ' + sales + '
<span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
        }
    }]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(view, options);
}

您可以在工具提示中使用您想要的任何HTML，并且您可能也希望对它们进行样式设置以使它们更加美观 .

作为替代解决方案，您可以使用两个系列绘制图表，但设置选项以隐藏第二个系列 . 然后，您可以将 focusTarget 选项设置为 'category' ，以同时在工具提示中显示两个系列：

series: {
    1: {
        // hide this series
        pointSize: 0,
        lineWidth: 0,
        displayInLegend: false
    }
},
focusTarget: 'category'

回复于 2024-05-22T05:35:34+08:00

在Google图表中使用列作为元数据

2 回答

相关问题