Google Bar-Chart（有过滤器）每栏中有不同颜色的酒吧 [英] Google Bar-Chart( Having Filter) With Different Colors in Bars for each column
本文介绍了Google Bar-Chart（有过滤器）每栏中有不同颜色的酒吧的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是我的javascript for google-chart
< script type =text / javascript>
google.load（'visualization'，'1.1'，{packages：['controls']}）;
< / script>
< script type =text / javascript>
函数drawVisualization（）{
//准备数据
var data = google.visualization.arrayToDataTable（[
['Country'，'Position'，'Prosthethis type'， '单位']，
['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]，
[ '法国'，'二尖'，'生物'，436]
]）;
$ b $ var countryPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control4'，
'options' ：{$ b $'filterColumnLabel'：'Country'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
' allowMultiple'：false
}
}，
'state'：{'selectedValues'：['Europe']}
}）;
$ b $ var regionPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control5'，
'options' ：{$ b $'filterColumnLabel'：'Position'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
' allowMultiple'：false
}
}
}）;
var cityPicker = new google.visualization.ControlWrapper（{$ b $'controlType'：'CategoryFilter'，$ b $'containerId'：'control6'，
'options' ：{
'filterColumnLabel'：'Prosthethis type'，
'ui'：{
'labelStacking'：'vertical'，
'allowTyping'：false，
'allowMultiple'：false
}，
}
}）;
$ b $ var barChart = new google.visualization.ChartWrapper（{
'chartType'：'BarChart'，$ b $'containerId'：'chart3'，
'options' ：{
'width'：400，
'height'：300，
'chartArea'：{top：0，right：0，bottom：0}
}，
//将条形图配置为使用列2（城市）和3（人口）
'view'：{'columns'：[2,3]}
}）;
google.visualization.Dashboard（document.getElementById（'visualization2'））。
//配置控件，使得：
// - 'Country'选择驱动'Region'one，
// - 'Region'选项驱动'City'
// - 最后，'City'输出驱动图表
bind（countryPicker，regionPicker）。
绑定（regionPicker，cityPicker）。
绑定（cityPicker，barChart）。
//绘制仪表板
draw（data）;
}
google.setOnLoadCallback（drawVisualization）;
< / script>
这是我的Html页面....
< html>
< head>
< title>无标题文档< / title>
< script type =text / javascriptsrc =http://www.google.com/jsapi>< / script>
< script type =text / javascript>
google.load（'visualization'，'1'，{packages：['corechart']}）;
< / script>
< / head>
< body>
< table width =100％border =1cellspacing =0cellpadding =5bordercolor =＃333333>
< tr>
< td bgcolor =＃333333class =heading-text> TEST< / td>
< / tr>
< tr>
< td bgcolor =＃FFFFFFclass =textalign =centerid =visualization2>< br />< br />
< 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>
< / td>
< / tr>
< / table>
< / body>
< / html> *
我只想要一件事情，我想要RED中的'Biological'列和Blue的'Mechanical'列。
目前所有栏目都是蓝色的。
我找到了许多不同颜色栏的网站.....但它们不适合我。
请帮助我。
谢谢....
解决方案
这是一个解决方案。您需要添加 p>
系列：[{color：'blue'，visibleInLegend：true}，
{color：'red'，visibleInLegend：在您的选项中为您的
。
这也不是确切的解决方案。这是一个解决方法，你可以添加一个重复的列，并隐藏该列的所有其他数据，除了你需要不同的颜色。
这是工作 sample。有关更多谷歌图表相关查询请看看这个。 jqfaq.com
Below is my javascript for google-chart
<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'],
['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);
</script>
This is my Html page....
<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
</script>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="5" bordercolor="#333333">
<tr>
<td bgcolor="#333333" class="heading-text">TEST</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" class="text" align="center" id="visualization2"><br/><br/>
<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>
</td>
</tr>
</table>
</body>
</html>*
I want only one thing To do in this graph: I want 'Biological' column in RED and 'Mechanical' in Blue color.
Currently all columns are in Blue.
I found many sites for different color column.....but they don't work for me.
Please help me.
Thanks....
解决方案
Here is a solution.You need to add
series: [{color: 'blue', visibleInLegend: true},
{color: 'red', visibleInLegend:false}]
in your options.
Also this is not the exact solution. It is a workaround you can add a duplicate column and hide that column for all other data except the one which you need different color.
Here is the working sample. For more google chart related queries take a look at this. jqfaq.com
这篇关于Google Bar-Chart（有过滤器）每栏中有不同颜色的酒吧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
