Javascript 筛选不在图表中的列GOOGLE图表
我不确定这是否有意义，或者这是否是所有可能的。我有一张图表，上面有下面几列 FEI，未放置舞者，工具提示，已放置舞者，工具提示，放置，工具提示 所以我有4列不包括工具提示。 但是，我想增加两列，仅用于筛选。它不应该是可见的，或者无论如何都会影响图表。 我想包括一个daterange和一个columnfilter 我试着简单地添加列，然后用setview隐藏它们，但是图表无法绘制 这是我的代码，没有添加额外的列Javascript 筛选不在图表中的列GOOGLE图表,javascript,html,charts,google-visualization,Javascript,Html,Charts,Google Visualization,我不确定这是否有意义，或者这是否是所有可能的。我有一张图表，上面有下面几列 FEI，未放置舞者，工具提示，已放置舞者，工具提示，放置，工具提示 所以我有4列不包括工具提示。 但是，我想增加两列，仅用于筛选。它不应该是可见的，或者无论如何都会影响图表。 我想包括一个daterange和一个columnfilter 我试着简单地添加列，然后用setview隐藏它们，但是图表无法绘制 这是我的代码，没有添加额外的列 function comboChart(){ var data
function comboChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}],
['Garden State Feis - 01-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place'],['GEM CITY FEIS - 02-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place'],['Broesler Feis - 07-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place'],['GEM CITY FEIS - 08-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place'],['Garden State Feis - 12-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place'],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_div',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -20, f: '20'},
0,
20,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(searchfilter, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'recalled'],
['Garden State Feis - Jan-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place', Yes],['Oireachtas MidAtlantic - Apr-01-2014', -14, 'Total Dancers Not Placed: 14', 30, 'Total Dancers Placed: 30', 14, 'Lace\'s Placement: 14th place', Yes],['GEM CITY FEIS - Feb-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', No],['Broesler Feis - Jul-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place', Yes],['GEM CITY FEIS - Aug-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', No],['Garden State Feis - Dec-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', No],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('major_chart'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis or year'
},
'matchType': 'any'
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'col_filter_major',
options: {
filterColumnLabel: 'recalled',
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'major',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(searchfilter, colfilter, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],
['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30', 1, 'Rob placed 1st out of 66 total dancers', new Date(10-27-2018), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34', 11, 'Rob placed 11th out of 78 total dancers', new Date(02-03-2019), 'No', '11th place'], ]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter_major',
options: {
filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'recalled_filter_major',
options: {
filterColumnLabel: 'recalled',
'ui': {
label: 'Show Recalled'
}
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5, 6, 9]
}
});
dashboard.bind([searchfilter, datefilter, colfilter], barChart);
dashboard.draw(data);
}
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'recalled'],
['Garden State Feis - Jan-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22', 20, 'Lace\'s Placement: 20th Place', Yes],['Oireachtas MidAtlantic - Apr-01-2014', -14, 'Total Dancers Not Placed: 14', 30, 'Total Dancers Placed: 30', 14, 'Lace\'s Placement: 14th place', Yes],['GEM CITY FEIS - Feb-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', No],['Broesler Feis - Jul-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15', 1, 'Lace\'s Placement: 1st place', Yes],['GEM CITY FEIS - Aug-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', No],['Garden State Feis - Dec-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', No],
]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('major_chart'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis or year'
},
'matchType': 'any'
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'col_filter_major',
options: {
filterColumnLabel: 'recalled',
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'major',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5]
}
});
// Establish dependencies, declaring that 'filter' drives 'pieChart',
// so that the pie chart will only display entries that are let through
// given the chosen slider range.
dashboard.bind(searchfilter, colfilter, barChart);
// Draw the dashboard.
dashboard.draw(data);
}
function majorChart(){
var data = google.visualization.arrayToDataTable([
['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],
['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30', 1, 'Rob placed 1st out of 66 total dancers', new Date(10-27-2018), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34', 11, 'Rob placed 11th out of 78 total dancers', new Date(02-03-2019), 'No', '11th place'], ]);
// Create a dashboard.
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
'filterColumnLabel': 'feis',
'ui': {
label: 'Filter by feis'
},
'matchType': 'any'
}
});
var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter_major',
options: {
filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'recalled_filter_major',
options: {
filterColumnLabel: 'recalled',
'ui': {
label: 'Show Recalled'
}
}
});
// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
tooltip: {isHtml: true},
legend:'none',
chartArea: {
height: '100%',
width: '100%',
top: 16,
right: 16,
bottom: 60,
left: 60
},
colors: ['#03a9f4', '#9ACB00', '#616161'],
hAxis: {
title: 'Feis Competiton and date'
},
height: '100%',
isStacked: true,
legend: {
position: 'none'
},
pointSize: 6,
series: {
2: {
type: 'line'
}
},
seriesType: 'bars',
vAxis: {
ticks: [
{v: -40, f: '40'},
{v: -30, f: '30'},
{v: -20, f: '20'},
{v: -10, f: '10'},
0,
10,
20,
30,
40
],
title: 'Placement'
},
width: '100%'
},
view: {
columns: [0, 1, 2, 3, 4, 5, 6, 9]
}
});
dashboard.bind([searchfilter, datefilter, colfilter], barChart);
dashboard.draw(data);
}
在控件或图表包装器上使用
视图时，
列
和行
属性应该是索引，
不是标签
这里不是列标签
columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']
使用列索引
columns: [0, 1, 2, 3, 4, 5, 6]
然后，您可以向数据表中添加图表将忽略的其他列。
请参阅以下工作片段
google.charts.load（'current'{
包：['controls']
}).然后（函数（）{
var data=google.visualization.arrayToDataTable([
['feis'，'Dancers Not Placed'，{type:'string'，role:'tooltip'}，{type:'string'，role:'tooltip'}，{type:'string'，Placement'，{type:'string'，role:'tooltip'}，'date'，column']，
['Garden State Feis-01-05-2014'，-18，'Total Dancers Not Placed:18'，22，'Total Dancers Placed:22'，20，'Lace's Placement:20'，新日期（2018年11月1日），'A']，
['GEM CITY FEIS-02-14-2018'，-42，'Total Dancers Not Placed:42'，38，'Total Dancers Placed:38'，-1，'Lace's Placement:1st Placed:1st'，新日期（2018年11月2日），'B']，
['Broesler Feis-07-09-2018'，-15，'Total Dancers Not Placed:15'，15，'Total Dancers Placed:15'，1，'Lace's Placement:1st Placed:1st'，新日期（2018年11月3日），'C']，
['GEM CITY FEIS-08-21-2018'，-21，'Total Dancers Not Placed:21'，26，'Total Dancers Placed:26'，-2，'Lace's Placement:2'，新日期（2018年11月4日），'D']，
['Garden State Feis-12-01-2018'，-48，'未排名舞者总数：48'，12，'排名舞者总数：12'，-15，'蕾丝的排名：第15位'，新日期（2018年11月5日），'E']，
]);
//创建一个仪表板。
var dashboard=new google.visualization.dashboard(
document.getElementById（'dashboard_div'）；
//创建搜索筛选器，传递一些选项
var searchfilter=new google.visualization.ControlWrapper({
“controlType”：“StringFilter”，
“containerId”：“filter_div”，
“选项”：{
'filterColumnLabel'：'feis'，
“用户界面”：{
标签：“按feis过滤”
},
“匹配类型”：“任意”
}
});
var datefilter=new google.visualization.ControlWrapper({
controlType:'DateRangeFilter'，
containerId:“日期过滤器”，
选项：{
filterColumnLabel:'日期'，
}
});
var colfilter=new google.visualization.ControlWrapper({
controlType:“CategoryFilter”，
集装箱ID:“col_过滤器”，
选项：{
filterColumnLabel:'列'，
}
});
//创建组合图，传递一些选项
var barChart=new google.visualization.ChartWrapper({
'chartType'：'ComboChart'，
“集装箱船”：“组合图”，
“选项”：{
工具提示：{isHtml:true}，
图例：“无”，
图表区：{
高度：“100%”，
宽度：“100%”，
排名：16，
右：16，
底数：60，
左：60
},
颜色：['03a9f4'、'9ACB00'、'616161']，
哈克斯：{
标题：“Feis比赛和日期”
},
高度：“100%”，
isStacked：是的，
图例：{
位置：“无”
},
点数：6，
系列：{
2: {
类型：“行”
}
},
序列类型：“条”，
言辞：{
滴答声：[
{v:-40，f:'40'}，
{v:-20，f:'20'}，
0,
20,
40
],
标题：“安置”
},
宽度：“100%”
},
视图：{
列：[0,1,2,3,4,5,6]
}
});
//建立依赖关系，声明“筛选器”驱动“pieChart”，
//这样，饼图将只显示通过的条目
//给定选定的滑块范围。
dashboard.bind（[searchfilter，datefilter，colfilter]，条形图）；
//绘制仪表板。
仪表盘.绘图（数据）；
});
我不知道为什么，但当我在数组末尾添加两列“date，column”时，它不会绘制。但一旦我移除它们，它就会吸引我。我知道，我不知道为什么它对我不起作用。。。我已经更新了我的代码=[可能是因为我在页面中有多个图表？在上面编辑的数据中，是/否必须在引号中-->'Yes'
/'No'
好的，过滤器正在显示，但图表本身没有绘制。有更简单的调试方法吗？