我正在进行ASP.Net MVC 5 Web应用程序。其中一个页面是一个统计页面,假设有一个SelectList,用于选择我在此页面上的图表数量(1,2,4或6)。 然后,我将使用相同数量的按钮来单独生成每个图形
像这样:
<div id="myContainer">
<select id="totalCharts>
....
</select>
<div id="ChartArea1">
<button id="btn1"></button>
<canvas id="chart1></canvas>
</div>
....
<div id="ChartAreaN">
<button id="btnN"></button>
<canvas id="chartN></canvas>
</div>
</div>
然后我想在单击按钮时生成带有Ajax请求的每个图表。
我尝试了几种方法,但不使用它们。你能告诉最简单的方法吗?
答案 0 :(得分:1)
检查链接是否有完整代码: http://jsfiddle.net/hacker1211/n72vv902/
$(document).ready(function(){
var n=10; //no of items in dropdown
for(i=1;i<=n;i++){
$('#totalCharts').append('<option value="'+i+'">'+i+'</option>');
}
});
//code to populate divs,buttons,canvas
$('#totalCharts').change(function(){
for(j=1;j<=$(this).val();j++){
$('#myContainer').append('<div id="ChartArea'+j+'"><button id="btn'+j+'">Button '+j+'</button><canvas id="chart'+j+'"> </canvas></div>');
}
});
$('button').click(function(e){
e.preventDefault();
var url="http://www.example.com"; //put your url here
var id=$(this).attr('id'); //if you need button id
$.ajax(url, {
success: function(data) {
//code to draw chart here
},
error: function() {
alert('Error in sending ajax');
}
});
});