我正在使用MVC 5中的Highcharts。我希望能够点击柱形图上的一列,并让用户进入模态弹出窗口并每次显示新图形,我也有json结果数据,但它不能像我想的那样绘制图表。有没有人对如何做到这一点有任何想法?
所以,这是输出的屏幕截图: 当我将json数据从控制器传递给highchart时,图形显示如下:
enter image description here 这是高潮javascript:
plotOptions: {
series: {
colorByPoint: true,
cursor: 'pointer',
dataLabels: {
enabled: true
},
shadow: false,
point: {
events: {
click: function () {
if (this.name === null) {
return false;
}
else {
$('#modalHeaderTitle').text(this.name);
//Get Query string parameter value
var table = getParameterByName('table');
var column = getParameterByName('column');
//Ajax call for get Modal data
$.ajax({
type: "POST",
url: "/NewService/GetModalData",
data: '{tablename: "' + table + '", columname: "' + column +'", name: "' + this.name + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
if (result==='[]') {
bootbox.alert({
message: "There is no data to show graph?",
className: 'bb-alternate-modal'
});
// Set a timeout to hide the element again
setTimeout(function () {
bootbox.hideAll();
}, 2000);
}
else {
modaldataSeries = result;
getModalChart(modaldataSeries);
}
},
error: function (e) {
console.log(e);
}
});
}
}
}
}
}
}
这是功能:
function getModalChart(modaldataSeries) {
var chart1=$('#container11').highcharts( {
chart: {
type: 'column'
}
, title: {
text: 'Single_Geography_Timeline'
}
, xAxis: {
type: 'category'
}
, plotOptions: {
series: {
pointPadding: 0, groupPadding: 0.1,
}
}
, series: modaldataSeries,
credits: {
enabled: false
}
}
);
$("#myModal").modal( {
show: true, backdrop: 'static', keyboard: false
}
);
console.log(modaldataSeries);
$("#jsonData").text('series :'+modaldataSeries);
}
当我尝试手动设置系列数据时,此处正确显示输出示例enter image description here:
我无法弄清楚javascript中的错误
提前致谢。