使用谷歌图表指令在角度js中钻取图表 [英] Drilldown charts in angular js using google charts directives
本文介绍了使用谷歌图表指令在角度js中钻取图表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
view：index.html
<预>
< br />
< google-chart #drillchart [data] ='pieChartData'type =BarChart（chartSelect）='select（$ event）'>
< / google-chart>
< / pre>
Component.ts：
pieChartData = {
chartType：'BarChart'，
dataTable：[
['Country'，'Poulation' ]，
['Ind'，25]，
['Rus'，10]，
['Chi'，30]，
['USA'，15]，
['UK'，12]，
['Aus'，8]
]，
选项：{'title'：'人口'}
};
newDataIndia = [
['State'，'Poulation']，
['AndhraPradesh'，30]，
['UttarPradesh'， 40]，
['MadyaPradesh'，10]，
['Karnataka'，10]，
['Tamilnadu'，10]
];
newDataUS = [
''State'，'Poulation']，
['Texas'，30]，
['Florida'， 40]，
['Pennsylvania'，10]，
['Lousiana'，15]，
['Colorado'，10]
];
public changeData（data）：void {
$ b $ / * let dataTable = this.drillchart.wrapper.getDataTable（）; （i = 0; i <6; i ++）{
dataTable.setValue（i，1，Math.round（Math.random（）* 1000））的
;
dataTable.setValue（i，2，Math.round（Math.random（）* 1000））;
} * /
let dataTable = this.drillchart.wrapper.getDataTable（）
console.log（dataTable）;
dataTable.Sf [0] .label = data [0] [0];
dataTable.Sf [0] .type =string;
dataTable.Sf [1] .label = data [0] [1];
dataTable.Sf [1] .type =number; （let i = 0; i< data.length-1; i ++）{
dataTable.Tf [i] .c [0] .v = data [i + 1]
] [0];
dataTable.Tf [i] .c [1] .v = data [i + 1] [1]; （dataTable.Tf.length< data.length-1）
{
for（var icount = data.length-1; icount！
）
if = data.length-1; icount--）{
dataTable = dataTable.Tf.pop（）;
}
}
this.drillchart.redraw（）;
}
预先致谢
解决方案
与高图一样，谷歌图表中没有任何简单的方法可以进行深入分析。但有一些技巧是可能的
< input type =buttonstyle =width：auto！important; value =backid =btnBack/>
< div id =SkillBar>< / div>
取一个后退按钮和一个容器绘制图表。现在加载您的可视化库条形图并创建条形图
google.charts.load（'current'，{packages：[ 'corechart'，'bar']}）;
google.charts.setOnLoadCallback（drawAnnotations）;
函数drawAnnotations（）{
google.charts.setOnLoadCallback（drawSkillBar）;
函数drawSkillBar（）{
var data = new google.visualization.DataTable（）;
data.addColumn（'string'，'Category'）;
data.addColumn（'number'，'Demand'）;
data.addColumn（{type：'number'，role：'annotation'}）;
data.addColumn（'number'，'Supply Overall'）;
data.addColumn（{type：'number'，role：'annotation'}）;
data.addColumn（'number'，'Bench and Buffer'）;
data.addColumn（{type：'number'，role：'annotation'}）;
data.addRows（[
['Core'，25,25,22,22,12,12]，
['Invest'，15，15，21， 21，11，11]，
['其他'，10，10，12，12，9，9]
]）;
var options = {
title：''，
// hAxis：{
//标题：'每日时间'，
// }，
// vAxis：{
// title：'Rating（scale of 1-10）'
//}，
is3D：true，
'高度'：300，
'宽度'：600，
颜色：['＃3366CC'，'＃378eb8'，'＃984ea3']，
图例：'true'，
// focusTarget：'category'，
animation：{
startup：true，
duration：500，
easing：'out'
}
};
var chart = new google.visualization.ColumnChart（document.getElementById（'SkillBar'））;
创建您的选择处理程序像这样
function selectHandler（）{
var selectedItem = chart.getSelection（）[0];
if（selectedItem&& selectedItem.row！= null）{
var value = data.getValue（selectedItem.row，selectedItem.column）;
var column = data.getColumnLabel（selectedItem.column）
if（column.toLowerCase（）=='demand'）{
$（'＃btnBack'）。removeClass （'隐'）;
drawDemandBar（data.getValue（selectedItem.row，0），'＃3366CC'）;
if（column.toLowerCase（）=='supply overall'）{
$（'＃btnBack'）。removeClass（'hidden'）;
drawSupplyBar（data.getValue（selectedItem.row，0），'＃378eb8'）;
if（column.toLowerCase（）=='bench and buffer'）{
$（'＃btnBack'）。removeClass（'hidden'）;
drawOthersBar（data.getValue（selectedItem.row，0），'＃984ea3'）;
}
}
}
现在绘制您的图表附加了选择处理程序事件
google.visualization.events.addListener（图表，'select'，selectHandler）;
chart.draw（data，options）;
多数民众赞成它现在你所要做的是为3个小节声明三个不同的函数
1。 drawSupplyBar（）2. drawDemandBar（）3. drawOthersBar（）
你可以找到完整的代码和工作小提琴此处
We are new to angularjs v4. We have a requirement of drilldown charts in google charts. We are using ng2-google-charts directives. We are able to find the select event and updated the data. but chart is not reloading. Could any one please help on this.
view: index.html
<pre>
<br/>
<google-chart #drillchart [data]='pieChartData' type="BarChart" (chartSelect)='select($event)'>
</google-chart>
</pre>
Component.ts:
pieChartData = {
chartType: 'BarChart',
dataTable: [
['Country', 'Poulation'],
['Ind', 25],
['Rus', 10],
['Chi', 30],
['USA', 15],
['UK', 12],
['Aus', 8]
],
options: {'title': 'Population'}
};
newDataIndia = [
['State', 'Poulation'],
['AndhraPradesh', 30],
['UttarPradesh', 40],
['MadyaPradesh', 10],
['Karnataka', 10],
['Tamilnadu', 10]
];
newDataUS = [
['State', 'Poulation'],
['Texas', 30],
['Florida', 40],
['Pennsylvania', 10],
['Lousiana', 15],
['Colorado', 10]
];
public changeData(data):void {
/*let dataTable = this.drillchart.wrapper.getDataTable();
for (let i = 0; i < 6; i++) {
dataTable.setValue(i, 1, Math.round(Math.random() * 1000));
dataTable.setValue(i, 2, Math.round(Math.random() * 1000));
}*/
let dataTable = this.drillchart.wrapper.getDataTable()
console.log(dataTable);
dataTable.Sf[0].label = data[0][0];
dataTable.Sf[0].type = "string";
dataTable.Sf[1].label = data[0][1];
dataTable.Sf[1].type = "number";
for (let i = 0; i < data.length-1; i++) {
dataTable.Tf[i].c[0].v = data[i+1][0];
dataTable.Tf[i].c[1].v = data[i+1][1];
}
if(dataTable.Tf.length < data.length-1)
{
for(var icount = data.length-1; icount != data.length-1; icount--) {
dataTable = dataTable.Tf.pop();
}
}
this.drillchart.redraw();
}
Thanks in advance.
解决方案
Like highcharts there isn't any simple way in google charts to make drilldown. But with some tricks it is possible
<input type="button" style="width: auto !important;" value="back" id="btnBack" />
<div id="SkillBar"></div>
Take a back button and a container to draw chart. Now load your visualization library bar charts and create your bar chart
google.charts.load('current', { packages: ['corechart', 'bar'] });
google.charts.setOnLoadCallback(drawAnnotations);
function drawAnnotations() {
google.charts.setOnLoadCallback(drawSkillBar);
function drawSkillBar() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Category');
data.addColumn('number', 'Demand');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Supply Overall');
data.addColumn({ type: 'number', role: 'annotation' });
data.addColumn('number', 'Bench and Buffer');
data.addColumn({ type: 'number', role: 'annotation' });
data.addRows([
['Core', 25, 25, 22, 22, 12, 12],
['Invest', 15, 15, 21, 21, 11, 11],
['Others', 10, 10, 12, 12, 9, 9]
]);
var options = {
title: '',
//hAxis: {
// title: 'Time of Day',
//},
//vAxis: {
// title: 'Rating (scale of 1-10)'
//},
is3D: true,
'height': 300,
'width': 600,
colors: ['#3366CC', '#378eb8', '#984ea3'],
legend: 'true',
//focusTarget: 'category',
animation: {
startup: true,
duration: 500,
easing: 'out'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById('SkillBar'));
Create your select handler like this
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem && selectedItem.row != null) {
var value = data.getValue(selectedItem.row, selectedItem.column);
var column = data.getColumnLabel(selectedItem.column)
if (column.toLowerCase() == 'demand') {
$('#btnBack').removeClass('hidden');
drawDemandBar(data.getValue(selectedItem.row, 0), '#3366CC');
}
if (column.toLowerCase() == 'supply overall') {
$('#btnBack').removeClass('hidden');
drawSupplyBar(data.getValue(selectedItem.row, 0), '#378eb8');
}
if (column.toLowerCase() == 'bench and buffer') {
$('#btnBack').removeClass('hidden');
drawOthersBar(data.getValue(selectedItem.row, 0), '#984ea3');
}
}
}
Now draw your chart with select handler event attached
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(data, options);
Thats it.. Now all you have to do is declare three different functions for 3 bars
1. drawSupplyBar() 2. drawDemandBar() 3. drawOthersBar()
you can find full code and working fiddle Here
这篇关于使用谷歌图表指令在角度js中钻取图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
