![](/img/trans.png)
[英]how to dynamically add rows to google pie chart using ajax and jquery
[英]How to update google pie chart using jQuery ajax
我正在使用Google 饼图进行数据可视化并在页面加载时显示数据,现在我必须在用户选择任何类时更新饼图,数据将使用 ajax 更新,但我不知道如何使用 ajax 更新饼图,所以尝试提供您如何更新饼图的指导。
<div>
<select name="class" id="class" class="selectpicker">
<option value="1">Class 1</option>
<option value="2">Class 2</option>
</select>
</div>
<div id="donutchart" style="width: 900px; height: 350px;"></div>
<div id="chart"></div>
<div id="labelOverlay">
<p class="used-size piecolor">50<span>%</span></p>
<p class="total-size piecolor"> Progress</p>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
var selected = $(e.currentTarget).val();
if (selected > 0) {
$.ajax({
url: '/reports/?classId=' + selected + '&type=progress',
type: 'get',
dataType: 'html',
beforeSend: function () {
}
}).done(function (learnerProgress) {
}).fail(function (jqXHR, ajaxOptions, thrownError) {
});
}
});
});
</script>
<script type="text/javascript">
google.charts.load("current", {
packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Effort', 'Amount given'],
['Mastered', 80],
['Acquired', 40],
['Under Acquisition', 40],
['Needs More Practice', 20],
['Not started', 20],
]);
var options = {
//is3D:true,
'tooltip': {
trigger: 'none'
},
pieSliceText: "none",
enableInteractivity: false,
pieHole: 0.7,
pieSliceTextStyle: {
color: 'black',
},
slices: {
0: {
color: '#009487'
},
1: {
color: '#88C157'
},
2: {
color: '#FFEA55'
},
3: {
color: '#FF972D'
},
4: {
color: '#FA463D'
}
}
//legend: 'none'
};
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
chart.draw(data, options);
google.load('visualization', '1', options);
}
</script>
首先,google的load语句会默认等待页面加载。
所以使用 --> google.charts.load
而不是 --> $(document).ready
谷歌加载后,创建图表、选项和设置选择更改事件。
假设ajax数据采用以下格式,
[
['Effort', 'Amount given'],
['Mastered', 80],
['Acquired', 40],
['Under Acquisition', 40],
['Needs More Practice', 20],
['Not started', 20],
]
看下面的片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
var options = {
tooltip: {
trigger: 'none'
},
pieSliceText: "none",
enableInteractivity: false,
pieHole: 0.7,
pieSliceTextStyle: {
color: 'black',
},
slices: {
0: {
color: '#009487'
},
1: {
color: '#88C157'
},
2: {
color: '#FFEA55'
},
3: {
color: '#FF972D'
},
4: {
color: '#FA463D'
}
}
};
$('#class').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
var selected = $(e.currentTarget).val();
if (selected > 0) {
drawChart(selected);
}
});
function drawChart(selected) {
$.ajax({
url: '/reports/?classId=' + selected + '&type=progress',
type: 'get',
dataType: 'html',
beforeSend: function () {
}
}).done(function (learnerProgress) {
var data = google.visualization.arrayToDataTable(learnerProgress);
chart.draw(data, options);
}).fail(function (jqXHR, ajaxOptions, thrownError) {
});
}
// on page load
drawChart($('#class').val());
});
注意:不需要以下内容,这是旧版本的加载语句。
google.load('visualization', '1', options);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.