无法使用JsonResult ajax调用在模态弹出窗口上绘制高级图

时间:2017-06-06 07:18:44

标签: jquery json ajax highcharts

我正在使用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中的错误

提前致谢。

0 个答案:

没有答案