使用Google图表API[https://developers.google.com/chart/interactive/docs/events]我有一个格式正确的ComboChart和一个格式适当的谷歌渲染数据表。
我可以使用setSelection()函数-但是,选择会突出显示我的平均线,它穿过条形图的中间。
我不知道如何使图表/图形区域上突出显示的"点"出现在其他系列/数据集上(例如,突出显示条形图而不是平均线——根据任何平均值,这是一条穿过中间的直线,对我的最终用户来说毫无意义)。
如果你愿意,我可以在JS fiddle中添加一些代码,但它实际上只是一个基本的谷歌组合图,显示几个不同的条形图作为我的主数据集,显示一条平均线作为我的系列"1"(基数为0)。
编辑:添加js-fiddle:http://jsfiddle.net/GSryX/
[code]
some code
[/code]
有什么想法吗?
编辑:
如果条形图太小,无法显示选择效果,您可以使用这样的方法http://jsfiddle.net/asgallant/5SX8w/以更改所选内容的条形图颜色。当您只有1个系列的数据时,这种方法效果最好;如果您有多个系列,则需要对其进行修改,并且可能无法正确显示,除非您使用堆叠条形图。
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Foo', 94],
['Bar', 23],
['Baz', 80],
['Bat', 47],
['Cad', 32],
['Qud', 54]
]);
var chart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
dataTable: data,
options: {
// setting the "isStacked" option to true fixes the spacing problem
isStacked: true,
height: 300,
width: 600,
series: {
1: {
// set the color to change to
color: '00A0D0',
// don't show this in the legend
visibleInLegend: false
}
}
}
});
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getChart().getSelection();
if (selection.length > 0) {
var newSelection = [];
// if row is undefined, we selected the entire series
// otherwise, just a single element
if (typeof(selection[0].row) == 'undefined') {
newSelection.push({
column: 2
});
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function () {
// this series is just a placeholder
return 0;
}
}, 1]
});
}
else {
var rows = [];
for (var i = 0; i < selection.length; i++) {
rows.push(selection[i].row);
// move the selected elements to column 2
newSelection.push({
row: selection[i].row,
column: 2
});
}
// set the view to remove the selected elements from the first series and add them to the second series
chart.setView({
columns: [0, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? null : {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)};
}
}, {
type: 'number',
label: data.getColumnLabel(1),
calc: function (dt, row) {
return (rows.indexOf(row) >= 0) ? {v: dt.getValue(row, 1), f: dt.getFormattedValue(row, 1)} : null;
}
}]
});
}
// re-set the selection when the chart is done drawing
var runOnce = google.visualization.events.addListener(chart, 'ready', function () {
google.visualization.events.removeListener(runOnce);
chart.getChart().setSelection(newSelection);
});
}
else {
// if nothing is selected, clear the view to draw the base chart
chart.setView();
}
chart.draw();
});
chart.draw();
}