我有一页 - http://projectdemo.in/Dario/Dario/Panel_report_TEST_v015.html
请参阅此图表“外科心脏瓣膜植入物：机械与生物混合，2012 年第四季度”
现在在这个图表中，我想要红色的“机械”和蓝色的“生物”。
我该怎么做？
这是我的代码------
<tr>
<td bgcolor="#FFFFFF" class="text" align="center" id="visualization2"><br/><br/>
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['controls']});
</script>
<script type="text/javascript">
function drawVisualization() {
// Prepare the data
var data = google.visualization.arrayToDataTable([
['Country', 'Position', 'Prosthethis type', 'Units'],
['Austria', 'Aortic', 'Mechanical', 84],
['Austria', 'Aortic', 'Biological', 393],
['Austria', 'Mitral', 'Mechanical', 24],
['Austria', 'Mitral', 'Biological', 125],
['Benelux', 'Aortic', 'Mechanical', 365],
['Benelux', 'Aortic', 'Biological', 1147],
['Benelux', 'Mitral', 'Mechanical', 223],
['Benelux', 'Mitral', 'Biological', 302],
['Europe', 'Aortic', 'Mechanical', 5007],
['Europe', 'Aortic', 'Biological', 15434],
['Europe', 'Mitral', 'Mechanical', 1974],
['Europe', 'Mitral', 'Biological', 3550],
['France', 'Aortic', 'Mechanical', 803],
['France', 'Aortic', 'Biological', 2277],
['France', 'Mitral', 'Mechanical', 229],
['France', 'Mitral', 'Biological', 436],
['Germany', 'Aortic', 'Mechanical', 1038],
['Germany', 'Aortic', 'Biological', 4397],
['Germany', 'Mitral', 'Mechanical', 228],
['Germany', 'Mitral', 'Biological', 929],
['Italy', 'Aortic', 'Mechanical', 678],
['Italy', 'Aortic', 'Biological', 2383],
['Italy', 'Mitral', 'Mechanical', 284],
['Italy', 'Mitral', 'Biological', 520],
['Nordics', 'Aortic', 'Mechanical', 351],
['Nordics', 'Aortic', 'Biological', 971],
['Nordics', 'Mitral', 'Mechanical', 145],
['Nordics', 'Mitral', 'Biological', 226],
['Portugal', 'Aortic', 'Mechanical', 159],
['Portugal', 'Aortic', 'Biological', 534],
['Portugal', 'Mitral', 'Mechanical', 85],
['Portugal', 'Mitral', 'Biological', 111],
['Spain', 'Aortic', 'Mechanical', 646],
['Spain', 'Aortic', 'Biological', 1469],
['Spain', 'Mitral', 'Mechanical', 417],
['Spain', 'Mitral', 'Biological', 359],
['Switzerland', 'Aortic', 'Mechanical', 166],
['Switzerland', 'Aortic', 'Biological', 328],
['Switzerland', 'Mitral', 'Mechanical', 85],
['Switzerland', 'Mitral', 'Biological', 122],
['UK & Ireland', 'Aortic', 'Mechanical', 588],
['UK & Ireland', 'Aortic', 'Biological', 1283],
['UK & Ireland', 'Mitral', 'Mechanical', 191],
['UK & Ireland', 'Mitral', 'Biological', 314]
]);
// Define category pickers for 'Country', 'Region/State' and 'City'
var countryPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control4',
'options': {
'filterColumnLabel': 'Country',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
},
'state': {'selectedValues': ['Europe']}
});
var regionPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control5',
'options': {
'filterColumnLabel': 'Position',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
var cityPicker = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'control6',
'options': {
'filterColumnLabel': 'Prosthethis type',
'ui': {
'labelStacking': 'vertical',
'allowTyping': false,
'allowMultiple': false
}
}
});
// Define a bar chart to show 'Population' data
var barChart = new google.visualization.ChartWrapper({
'chartType': 'BarChart',
'containerId': 'chart3',
'options': {
'width': 400,
'height': 300,
'chartArea': {top: 0, right: 0, bottom: 0}
},
// Configure the barchart to use columns 2 (City) and 3 (Population)
'view': {'columns': [2, 3],'colors': ['red','green']}
});
// Create the dashboard.
new google.visualization.Dashboard(document.getElementById('visualization2')).
// Configure the controls so that:
// - the 'Country' selection drives the 'Region' one,
// - the 'Region' selection drives the 'City' one,
// - and finally the 'City' output drives the chart
bind(countryPicker, regionPicker).
bind(regionPicker, cityPicker).
bind(cityPicker, barChart).
// Draw the dashboard
draw(data);
}
google.setOnLoadCallback(drawVisualization);
</script>
<table>
<tr style='vertical-align: top'>
<td style='width: 300px; font-size: 0.9em;'>
<div id="control4"></div>
<div id="control5"></div>
<div id="control6"></div>
</td>
<td style='width: 600px'>
<div style="float: left;" id="chart3"></div>
<div style="float: left;" id="chart4"></div>
</td>
</tr>
</table>
</td>
</tr>