问题描述
限时送ChatGPT账号..我们是 angularjs v4 的新手.我们需要在谷歌图表中使用向下钻取图表.我们正在使用 ng2-google-charts 指令.我们能够找到选择事件并更新数据.但图表没有重新加载.任何人都可以帮忙解决这个问题.
查看:index.html
<br/><google-chart #drillchart [data]='pieChartData' type="BarChart" (chartSelect)='select($event)'></google-chart>
Component.ts:
pieChartData = {chartType: '条形图',数据表:[['国家','人口'],['工业',25],['Rus', 10],['志', 30],['美国', 15],['英国', 12],['澳大利亚',8]],选项:{'title':'人口'}};新数据印度 = [['国家','人口'],['安得拉邦',30],['北方邦',40],['MadyaPradesh', 10],['卡纳塔克邦',10],['泰米尔纳德邦',10]];新数据US = [['国家','人口'],['德克萨斯',30],['佛罗里达',40],['宾夕法尼亚州',10],['路易斯安那州',15],['科罗拉多',10]];公共更改数据(数据):无效{/*让数据表= this.drillchart.wrapper.getDataTable();for (让 i = 0; i <6; i++) {dataTable.setValue(i, 1, Math.round(Math.random() * 1000));dataTable.setValue(i, 2, Math.round(Math.random() * 1000));}*/让 dataTable = this.drillchart.wrapper.getDataTable()控制台日志(数据表);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();}
提前致谢.
解决方案像 highcharts 一样,谷歌图表中没有任何简单的方法来进行钻取.但是有一些技巧是可能的
<div id="技能栏"></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', '类别');data.addColumn('number', '需求');data.addColumn({ type: 'number', role: 'annotation' });data.addColumn('number', '供应总量');data.addColumn({ type: 'number', role: 'annotation' });data.addColumn('number', 'Bench and Buffer');data.addColumn({ type: 'number', role: 'annotation' });数据.addRows([['核心', 25, 25, 22, 22, 12, 12],['投资', 15, 15, 21, 21, 11, 11],['其他', 10, 10, 12, 12, 9, 9]]);变量选项 = {标题: '',//h轴:{//title: '时间',//},//v轴:{//title: '评级(1-10 级)'//},is3D: 真,'高度':300,宽度":600,颜色:['#3366CC'、'#378eb8'、'#984ea3']、传说:'真实',//focusTarget: '类别',动画片: {启动:真的,持续时间:500,缓动:'退出'}};var chart = new google.visualization.ColumnChart(document.getElementById('SkillBar'));
像这样创建选择处理程序
函数 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)如果(column.toLowerCase()=='需求'){$('#btnBack').removeClass('隐藏');drawDemandBar(data.getValue(selectedItem.row, 0), '#3366CC');}if (column.toLowerCase() == '供应总量') {$('#btnBack').removeClass('隐藏');drawSupplyBar(data.getValue(selectedItem.row, 0), '#378eb8');}if (column.toLowerCase() == 'bench and buffer') {$('#btnBack').removeClass('隐藏');drawOthersBar(data.getValue(selectedItem.row, 0), '#984ea3');}}}
现在绘制带有选择处理程序事件的图表
google.visualization.events.addListener(chart, 'select', selectHandler);图表绘制(数据,选项);
就是这样.. 现在你所要做的就是为 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
这篇关于使用 google charts 指令在 angular js 中钻取图表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论