Question

<script type="text/javascript">
    $(document).ready(function () {
        var dateFormat;
        var ajaxDataRenderer = function () {
            var chartDataArr = [];
            var id = $("#industryList option:selected").val();
            var url = window.baseUrl + "Widget/GlobalThreatConChartData/" + id;
            $.ajax({
                async: false,
                type: "POST",
                url: url,
                dataType: "json",
                success: function (data) {
                    chartDataArr = JSON.parse("[" + data.ChartData + "]");
                    dateFormat = data.DateFormat;
                }
            });
            return chartDataArr;
        };

        var threatChart = function () {
            var chartData = ajaxDataRenderer();

            if ($.isArray(chartData) && chartData[0].length > 0) {
                $.jqplot('threatConChart', chartData, {
                    animate: true,
                    animateReplot: true,
                    series: [{
                        rendererOptions: {
                            animation: {
                                speed: 2000
                            }
                        }
                    }],
                    legend: { show: false },
                    axes: {
                        xaxis: {
                            numberTicks: 7,
                            tickOptions: {
                                showGridline: false,
                                angle: -45,
                                formatString: dateFormat,
                                fontFamily: 'HP Simplified',
                                fontSize: '8pt',
                                textColor: '#000000'
                            },
                            renderer: $.jqplot.DateAxisRenderer,
                            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        },
                        yaxis: {
                            min: 1,
                            max: 5,
                            numberTicks: 3,
                            tickOptions: {
                                formatString: '%d',
                                fontFamily: 'HP Simplified',
                                fontSize: '8pt'
                            },
                            labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                        }
                    },
                    grid: {
                        drawGridLines: true,
                        background: '#ffffff',
                        borderWidth: 0,
                        shadow: false,
                    },
                    seriesDefaults: {
                        show: true,
                        xaxis: 'xaxis',
                        yaxis: 'yaxis',
                        color: '#0096d6',
                        lineWidth: 1.5,
                        showLine: true,
                        showMarker: false,
                        renderer: $.jqplot.LineRenderer,
                        shadow: false
                    },
                    highlighter: {
                        show: false
                    },
                    cursor: {
                        show: true,
                        tooltipLocation: 'sw',
                        followMouse: true
                    }
                });
            } else {
                $("#threatConChart").append("<br/><br/><div class='center'>No data available to plot chart.</div>");
            }
        };

        //Call threat chart on select change
        $("#industryList").change(function () {
            $('#loader').show();
            $('#threatConChart').empty();
            threatChart();
            threatGauge();
        });

        //Call for the first time with first value
        threatChart();
    });

</script>
<div id="threatConChart" class="right-widget-content chart-size"></div>

从母版页调用所需的JS文件。这是通过ajax加载的局部视图。

首次加载页面时不会呈现图表。页面中有一个选择列表。当我从列表中选择一个项目时，图表会正确呈现。

我注意到它在div中添加了类'jqplot-target'。这意味着它进入了jquery.jplot.js文件。

此外，数据已正确接收。我检查过了。

请提出我可能遗漏的内容。

Answer 1

在调用$(document).ready(function(){之前，您确定jqplot文件是否已完全加载。

尝试用$(window).load(function(){

替换它

jqPlot不会在页面加载时呈现，但在选择选择列表中的项目时会正常工作

1 个答案: