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

给出以下数据（来自谷歌图表示例页面）：

我如何只渲染一个显示销售额的折线图，但悬停时我会得到这个工具提示

2006
Sales: 660
Expenses: 540

以下是jsbin：

---

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

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

下面给出了一个例子

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

---

更多详细信息：

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

下面给出了一个例子

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

---

更多详细信息：

实现所需功能的方法是使用自定义工具提示。您可以创建一个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 + '<br /><span class="tooltipHeader">Sales</span>: ' + sales + '<br /><span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
        }
    }]);

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

---

实现所需的方法是使用自定义工具提示。您可以创建一个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 + '<br /><span class="tooltipHeader">Sales</span>: ' + sales + '<br /><span class="tooltipHeader">Expenses</span>: ' + expenses + '</div>';
        }
    }]);

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

---

你得到的有什么问题？我只想绘制第一个系列，当我悬停在数据点上时，使用第三列作为元数据。你得到的有什么问题？我只想绘制第一个系列，当我悬停在数据点上时，使用第三列作为元数据。谢谢，我使用了第二个解决方案，因为要添加到我正在处理的项目中的代码较少，并且希望保留应用的默认样式。刚刚在选项中添加了

工具提示：{showColorCode:false}

。谢谢，我选择了第二个解决方案，因为我正在处理的项目中添加的代码较少，并且希望保留应用的默认样式。刚刚在选项中添加了

工具提示：{showColorCode:false}

。