谷歌条形图(有filter)每列的栏中有不同的颜色
下面是我的谷歌图表的JavaScript
google.load('visualization', '1.1', {packages: ['controls']}); function drawVisualization() { // Prepare the data var data = google.visualization.arrayToDataTable([ ['Country', 'Position', 'Prosthethis type', 'Units'], ['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] ]); 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 }, } }); 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]} }); 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);
这是我的Html页面….
Untitled Document google.load('visualization', '1', {packages: ['corechart']}); TEST
*
我想在这个图中只做一件事:我想要RED中的“Biological”列和蓝色中的“Mechanical”。
目前所有列都是蓝色的。
我找到了许多不同颜色列的网站…..但它们对我不起作用。
请帮我。
谢谢….
这是一个解决方案。您需要添加
series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend:false}]
在你的选择中。
这也不是确切的解决方案。 这是一种解决方法,您可以添加重复列并为除了您需要不同颜色的数据之外的所有其他数据隐藏该列。
这是工作样本。 有关谷歌图表的更多相关查询,请查看此内容。 jqfaq.com