Google Visualization Column Chart将查询中的数据列设置为角色:“样式” [英] Google Visualization Column Chart set a data column from query as role: "Style"
问题描述
我有一个可以正常工作的查询的Google Visualization Column Chart。通过使用下面的代码片段,我可以在查询后设置具有样式角色的列。它为查询数据添加一个新列,并将角色设置为样式。这会相应地为每个柱形图栏着色。但是我希望能够使用我的查询列C中的一个作为颜色代码,而不必在之后添加它。我似乎无法得到这个工作。有任何想法吗?我在代码片段下面张贴了更多我的代码,以便您能看到我来自哪里。非常感谢你们提供的任何帮助。 Brandon
var data = response.getDataTable();
data.addColumn({type:string,role:style});
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
//更多代码这个,但我忘了它。
函数drawDashboard(){
var query = new google.visualization.Query(
'URL');
query.setQuery('SELECT A,B,C');
query.send(handleQueryResponse);
$ b函数handleQueryResponse(响应){
if(response.isError()){
alert('Error in query:'+ response.getMessage() +''+ response.getDetailedMessage());
return;
}
var data = response.getDataTable();
data.addColumn({type:string,role:style});
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
//创建仪表板。
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
//创建一个范围滑块,传递一些选项
var scoreSlider = new google.visualization.ControlWrapper({
controlType:'NumberRangeFilter',
containerId:' filter_div',
options:{
filterColumnLabel:'Class AVG'
}
});
ClassFilter = new google.visualization.ControlWrapper({
controlType:'CategoryFilter',
containerId:'Classfilter_div',
options:{
'filterColumnLabel':'Teacher Name','ui':{'labelStacking':'veClasscal','allowTyping':true,'allowMultiple':true
}
}});
//创建列条形图,传递一些选项
var columnChart = new google.visualization.ChartWrapper({
chartType:'ColumnChart',
containerId: 'chart_div',
选项:{
标题:'按班授课数学',
身高:320,
宽度:500,
chartArea:{left: 10%,顶部:10%,宽度:80%,高度:60%},
hAxis:{textStyle:{fontSize:14},title:'Teacher Name',titleTextStyle: {fontSize:14},textStyle:{fontSize:14}},
vAxis:{minValue:0,maxValue:100,title:'Math Proficiency AVG',titleTextStyle:{fontSize:14},textStyle:{fontSize :14}},
legend:{position:'none'},
animation:{duration:1500,easing:'out'},
colors:['#a4c2f4',' #3c78d8']
},
view:{columns:[0, 1,2]}
});
//定义表格
var table = new google.visualization.ChartWrapper({
chartType:'Table',
dataTable:data,
containerId:'table_div',
options:{
width:'400px'
},
view:{columns:[0,1,]}
}) ;
//建立依赖关系,声明'过滤'驱动'ColumnChart',
//这样柱形图将只显示允许通过
//的条目选择滑块范围。
dashboard.bind([scoreSlider],[table,columnChart]);
dashboard.bind([ClassFilter],[table,columnChart]);
//绘制仪表板。
dashboard.draw(data);
} //下面有更多代码,但我忽略了它。
我不知道如何将此添加到查询中的一列但... ...使用 rel =nofollow> DataView
假设您要测试的值在第二列 - index 1
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
$ b view.setColumns([0,1,{
type:string,
role:style,
calc:function(dataTable,rowIndex) {
if(dataTable.getValue(rowIndex,1)< 0.69){
return'color:red;';
} else if((dataTable.getValue(rowIndex,1)> ; = 0.69)&&(dataTable.getValue(rowIndex,1)< = 0.79)){
return'color:yellow;';
} else {
return'color :green;';
}
}
}]);
I have a Google Visualization Column Chart from a query that works fine. I can set the a columns with a style role after the query by using the code snippet below. It adds a new column to the query data and sets the role as "Style". This colors each of the column chart bars accordingly. But I want to be able to use one of my query columns "C" for example as the color code and not have to add it afterward. I can't seem to get this to work. Any ideas? I posted more of my code below the snippet so you can see where I'm coming from. Thanks so much guys for any help you can give. Brandon
var data = response.getDataTable();
data.addColumn({type: "string", role: "style" });
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
// More code above this, but I ommited it.
function drawDashboard() {
var query = new google.visualization.Query(
'URL');
query.setQuery('SELECT A, B, C');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
data.addColumn({type: "string", role: "style" });
data.setCell(0,2,'red');
data.setCell(1,2,'orange');
data.setCell(2,2,'green');
data.setCell(3,2,'yellow');
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a range slider, passing some options
var scoreSlider = new google.visualization.ControlWrapper({
controlType: 'NumberRangeFilter',
containerId: 'filter_div',
options: {
filterColumnLabel: 'Class AVG'
}
});
var ClassFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'Classfilter_div',
options: {
'filterColumnLabel': 'Teacher Name','ui': { 'labelStacking': 'veClasscal','allowTyping': true,'allowMultiple': true
}
}});
// Create a Column Bar chart, passing some options
var columnChart = new google.visualization.ChartWrapper({
chartType: 'ColumnChart',
containerId: 'chart_div',
options: {
title: 'Math Proficiency by Class',
height: 320,
width: 500,
chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
hAxis: {textStyle: {fontSize:14}, title: 'Teacher Name', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
vAxis: {minValue: 0, maxValue: 100, title: 'Math Proficiency AVG', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
legend: {position: 'none'},
animation: {duration:1500, easing:'out'},
colors: ['#a4c2f4','#3c78d8']
},
view: {columns: [0, 1, 2]}
});
// Define a table
var table = new google.visualization.ChartWrapper({
chartType: 'Table',
dataTable: data,
containerId: 'table_div',
options: {
width: '400px'
},
view: {columns: [0, 1,]}
});
// Establish dependencies, declaring that 'filter' drives 'ColumnChart',
// so that the column chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind([scoreSlider], [table, columnChart]);
dashboard.bind([ClassFilter], [table, columnChart]);
// Draw the dashboard.
dashboard.draw(data);
}// More code below this, but I ommited it.
I'm not sure how you would add this to a column in the query but...
using a DataView with a calculated column should work...
Assumes the value you want to test is in the second column -- index 1
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
type: "string",
role: "style",
calc: function (dataTable, rowIndex) {
if (dataTable.getValue(rowIndex, 1) < 0.69) {
return 'color: red;';
} else if ((dataTable.getValue(rowIndex, 1) >= 0.69) && (dataTable.getValue(rowIndex, 1) <= 0.79)) {
return 'color: yellow;';
} else {
return 'color: green;';
}
}
}]);
这篇关于Google Visualization Column Chart将查询中的数据列设置为角色:“样式”的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!