我有一个使用Google Charts的基本面积图。我可以为图表上的每个点设置工具提示,但是有没有办法为列中的所有点设置一个工具提示。
这是所需行为的屏幕截图:
您可以看到,当光标位于图形上的某个点上时,会绘制一条垂直线,并显示一个工具提示来描述该列中的所有数据(两条线的数据)。如果需要,请在此处查看实时示例。
这可以用谷歌图表来实现吗?
我有一个使用Google Charts的基本面积图。我可以为图表上的每个点设置工具提示,但是有没有办法为列中的所有点设置一个工具提示。
这是所需行为的屏幕截图:
您可以看到,当光标位于图形上的某个点上时,会绘制一条垂直线,并显示一个工具提示来描述该列中的所有数据(两条线的数据)。如果需要,请在此处查看实时示例。
这可以用谷歌图表来实现吗?
您需要做的就是将以下内容添加到您的选项中(如果是折线图):focusTarget: 'category'
这是一个示例(只需打开Google Playground并将上述行添加到最后的选项中):
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['x', 'Cats', 'Blanket 1', 'Blanket 2'],
['A', 1, 1, 0.5],
['B', 2, 0.5, 1],
['C', 4, 1, 0.5],
['D', 8, 0.5, 1],
['E', 7, 1, 0.5],
['F', 7, 0.5, 1],
['G', 8, 1, 0.5],
['H', 4, 0.5, 1],
['I', 2, 1, 0.5],
['J', 3.5, 0.5, 1],
['K', 3, 1, 0.5],
['L', 3.5, 0.5, 1],
['M', 1, 1, 0.5],
['N', 1, 0.5, 1]
]);
// Create and draw the visualization.
new google.visualization.LineChart(document.getElementById('visualization')).
draw(data, {curveType: "function",
width: 500, height: 400,
vAxis: {maxValue: 10},
// This line will make you select an entire row of data at a time
focusTarget: 'category'
}
);
}
非常简单!有关更多详细信息,请参阅Google 文档中的 focusTarget
如果你想要更复杂的东西,你可以摆弄域数据角色
这是一个示例代码:
google.load('visualization', '1.1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart_C6);
function drawChart_C6() {
var data = new google.visualization.DataTable();
data.addColumn({type: 'string', role: 'domain'}, '2009 Quarter');
data.addColumn('number', '2009 Sales');
data.addColumn('number', '2009 Expenses');
data.addColumn({type: 'string', role: 'domain'}, '2008 Quarter');
data.addColumn('number', '2008 Sales');
data.addColumn('number', '2008 Expenses');
data.addRows([
['Q1 \'09', 1000, 400, 'Q1 \'08', 800, 300],
['Q2 \'09', 1170, 460, 'Q2 \'08', 750, 400],
['Q3 \'09', 660, 1120, 'Q3 \'08', 700, 540],
['Q4 \'09', 1030, 540, 'Q4 \'08', 820, 620]
]);
var chart = new google.visualization.LineChart(document.getElementById('chart_C6'));
chart.draw(data, {width: 400, height: 240, legend:'right', focusTarget: 'category'});
}