c# - Highcharts 不会重绘

Question

我正在我的 C# 页面中尝试以下代码，但我highcharts无法自动重绘。它始终保持与第一次加载时相同的图表。

当我转到页面的视图源时，我可以看到新数据，但它没有被绘制。

这里有人可以帮我找出问题吗

 <script src="/_layouts/ChartDemo/jquery-1.7.min.js" type="text/javascript"></script>
   <script src="/_layouts/ChartDemo/highcharts.js" type="text/javascript"></script>

   <asp:Literal ID="lblErrorMsg" runat="server" Text=""></asp:Literal>
     <script type="text/jscript">
       function chart() {
         $('#container').highcharts({
         credits : {enabled :0 },
         title: {
            text: null
        },
          xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
            max: <%= MilliTimeStamp(_closingTime) %>,
            min: <%= MilliTimeStamp(_openingTime) %>,
            tickInterval: 0.5 * 3600 * 1000,
            minorTickInterval: 0.1 * 3600 * 1000,
            title: {
                text: null
            },
            lineWidth: 1,
            minorGridLineWidth: 1,
            endOnTick : true,
            gridLineWidth: 1
        },
          yAxis: {
            title: {
                text: null
            },
            tickInterval : <%= _tickIntervalY %>,
            max : <%= _maxY %>, 
            min: <%= _minY %>,
        },
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            },
            line : {
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
                }
        },

        series: [{
            type: 'area',
            name: 'Price Index'
        },
        {
            type: 'line',
            name: 'Price',
            color: 'Red',
            index: -1
        }]
        });

        var chart1 = $('#container').highcharts();
        chart1.series[0].setData(<%=output3%>);
        chart1.series[1].setData(<%=output%>);
    }

$(document).ready(function() {
    $.ajaxSetup({ cache: false});
    chart();
    setInterval(function() {chart();}, 5000);
});




   </script>
   <div id="container" style="Width:390px;Height:265px;" > </div >
  <asp:Literal ID="lblIntraday" runat="server" Visible="false"></asp:Literal>

这是我的查看源

   <script type="text/jscript">
   function chart() {
    $('#container').highcharts({
        credits : {enabled :0 },
        title: {
            text: null
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
            max: 1366210680000,
            min: 1366189200000,
            tickInterval: 0.5 * 3600 * 1000,
            minorTickInterval: 0.1 * 3600 * 1000,
            title: {
                text: null
            },
            lineWidth: 1,
            minorGridLineWidth: 1,
            endOnTick : true,
            gridLineWidth: 1
        },
        yAxis: {
            title: {
                text: null
            },
            tickInterval : 29,
            max : 7024, 
            min: 6881,
        },
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                fillColor: {
                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [
                        [0, Highcharts.getOptions().colors[0]],
                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                    ]
                },
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
            },
            line : {
                lineWidth: 1,
                marker: {
                    enabled: false
                },
                shadow: false,
                states: {
                    hover: {
                        lineWidth: 1
                    }
                },
                threshold: null
                }
        },

        series: [{
            type: 'area',
            name: 'Price Index'
        },
        {
            type: 'line',
            name: 'Price',
            color: 'Red',
            index: -1
        }]
        });

        var chart1 = $('#container').highcharts();
        chart1.series[0].setData([[1366189200000,6939.37],[1366210680000,6939.37]]);
        chart1.series[1].setData([[1366189931000,6938.64],[1366189997000,6939.4], [1366190063000,6938.53],[1366190129000,6943.05],[1366190195000,6942.73],[1366190261000,6943.86],[1366190327000,6944.75],[1366190393000,6941.99],[1366190459000,6941.99],[1366190525000,6945.68],[1366190591000,6943.87],[1366190657000,6947.65],[1366190723000,6942.59],[1366190789000,6941.3],[1366190855000,6943.45],[1366190921000,6946.95],[1366190987000,6949.75],[1366191053000,6952.11],[1366191119000,6950.53],[1366191185000,6951.58],[1366191251000,6953.94],[1366191317000,6954.86],[1366191383000,6955.88],[1366191449000,6957.07],[1366191515000,6956.87],[1366191581000,6956.45],[1366191647000,6958.76],[1366191713000,6956.84],[1366191779000,6956.97],[1366191845000,6955.68],[1366191911000,6957.18],[1366191977000,6960.6],[1366192043000,6959.11],[1366192109000,6960.15],[1366192175000,6960.79],[1366192241000,6962.1],[1366192307000,6964.19],[1366192373000,6963.18],[1366192439000,6966.65],[1366192505000,6964.51],[1366192571000,6963.36],[1366192637000,6960.11],[1366192703000,6958.91],[1366192769000,6959.24],[1366192835000,6955.61],[1366192901000,6955.03],[1366192967000,6955.27],[1366193033000,6954.94],[1366193099000,6954.32],[1366193165000,6953.34],[1366193231000,6951.17],[1366193297000,6951.88],[1366193363000,6955.12],[1366193429000,6956.47],[1366193495000,6954.09],[1366193561000,6953.49],[1366193627000,6953.49],[1366193693000,6953.49],[1366193759000,6953.49],[1366193825000,6953.49],[1366193891000,6953.49],[1366193957000,6953.49],[1366194023000,6953.49],[1366194089000,6953.49],[1366194155000,6953.49],[1366194221000,6953.49],[1366194287000,6953.49],[1366194353000,6953.49],[1366194419000,6953.49],[1366194485000,6953.49],[1366194551000,6953.49],[1366194617000,6953.49],[1366194683000,6953.49],[1366194749000,6953.49],[1366194815000,6953.49],[1366194881000,6953.49],[1366194947000,6953.49],[1366195013000,6953.49],[1366195079000,6953.49],[1366195145000,6953.49],[1366195211000,6953.49],[1366195277000,6953.49],[1366195343000,6953.49],[1366195409000,6953.49],[1366195475000,6953.49],[1366195541000,6953.49],[1366195607000,6953.49],[1366195673000,6953.49],[1366195739000,6953.49],[1366195805000,6953.49],[1366195871000,6953.49],[1366195937000,6953.49],[1366196003000,6953.49],[1366196069000,6953.49],[1366196135000,6953.49],[1366196201000,6953.49],[1366196267000,6953.49],[1366196333000,6953.49],[1366196399000,6953.49],[1366196465000,6953.49],[1366196531000,6953.49],[1366196597000,6953.49],[1366196663000,6953.49],[1366196729000,6953.49],[1366196795000,6953.49],[1366196861000,6953.49],[1366196927000,6953.49],[1366196993000,6953.49],[1366197059000,6953.49],[1366197125000,6953.49],[1366197191000,6953.49],[1366197257000,6953.49],[1366197323000,6953.49],[1366197389000,6953.49],[1366197455000,6953.49],[1366197521000,6953.49],[1366197587000,6953.49],[1366197653000,6953.49],[1366197719000,6953.49],[1366197785000,6953.49],[1366197851000,6953.49],[1366197917000,6953.49],[1366197983000,6953.49],[1366198049000,6953.49],[1366198115000,6953.49],[1366198181000,6953.49],[1366198247000,6953.49],[1366198313000,6953.49],[1366198379000,6953.49],[1366198445000,6953.49],[1366198511000,6953.49],[1366198577000,6953.49],[1366198643000,6953.49],[1366198709000,6953.49],[1366198775000,6953.49],[1366198841000,6953.49],[1366198907000,6953.49],[1366198973000,6953.49],[1366199039000,6953.49],[1366199105000,6953.49],[1366199171000,6953.49],[1366199237000,6953.49],[1366199303000,6953.49],[1366199369000,6953.49],[1366199435000,6953.49],[1366199501000,6953.49],[1366199567000,6953.49],[1366199633000,6953.49],[1366199699000,6953.49],[1366199765000,6953.49],[1366199831000,6953.49],[1366199897000,6953.49],[1366199963000,6953.49],[1366200029000,6953.49],[1366200095000,6953.49],[1366200161000,6953.49],[1366200227000,6953.49],[1366200293000,6953.49],[1366200359000,6953.49],[1366200425000,6953.49],[1366200491000,6953.49],[1366200557000,6953.49],[1366200623000,6953.49],[1366200689000,6953.49],[1366200755000,6953.49],[1366200821000,6953.49],[1366200887000,6953.49],[1366200953000,6953.49],[1366201019000,6953.49],[1366201085000,6953.49],[1366201151000,6953.49],[1366201217000,6953.49],[1366201283000,6953.49],[1366201349000,6953.49],[1366201415000,6953.49],[1366201481000,6953.49],[1366201547000,6953.49],[1366201613000,6953.49],[1366201679000,6953.49],[1366201745000,6953.49],[1366201811000,6953.49],[1366201877000,6953.49],[1366201943000,6953.49],[1366202009000,6953.49],[1366202075000,6953.49],[1366202141000,6953.49],[1366202207000,6953.49],[1366202273000,6953.49],[1366202339000,6953.49],[1366202405000,6953.49],[1366202471000,6953.49],[1366202537000,6953.49],[1366202603000,6953.49],[1366202669000,6953.49],[1366202735000,6953.49],[1366202801000,6953.49],[1366202867000,6953.49],[1366202933000,6953.49],[1366202999000,6953.49],[1366203065000,6953.49],[1366203131000,6953.49],[1366203197000,6953.49],[1366203263000,6953.49],[1366203329000,6953.49],[1366203395000,6953.49],[1366203461000,6953.49],[1366203527000,6953.49],[1366203593000,6953.49],[1366203659000,6953.49],[1366203725000,6953.49],[1366203791000,6953.49],[1366203857000,6953.49],[1366203923000,6953.49],[1366203989000,6953.49],[1366204055000,6953.49],[1366204121000,6953.49],[1366204187000,6953.49],[1366204253000,6953.49],[1366204319000,6953.6],[1366204385000,6954.76],[1366204451000,6954.75],[1366204517000,6953.47],[1366204583000,6950.78],[1366204649000,6949.79],[1366204715000,6949.41],[1366204781000,6951.84],[1366204847000,6950.22],[1366204913000,6947.8],[1366204979000,6949.15],[1366205045000,6949.23],[1366205111000,6950.83],[1366205177000,6952.41],[1366205243000,6952.42],[1366205309000,6950.59],[1366205375000,6951.86],[1366205441000,6953.94],[1366205507000,6954.89],[1366205573000,6954.11],[1366205639000,6952.1],[1366205705000,6951.83],[1366205771000,6953.92],[1366205837000,6956.96],[1366205903000,6956.65],[1366205969000,6957.34],[1366206035000,6955.55],[1366206101000,6954.53],[1366206167000,6954.29],[1366206233000,6955.17],[1366206299000,6954.43],[1366206365000,6954.11],[1366206431000,6951.62],[1366206497000,6955.09],[1366206563000,6953.16],[1366206629000,6954.58],[1366206695000,6953.19],[1366206761000,6953.71],[1366206827000,6952.52],[1366206893000,6949.97],[1366206959000,6951.15],[1366207025000,6949.91],[1366207091000,6950.05],[1366207157000,6949.72],[1366207223000,6948.89],[1366207289000,6949.17],[1366207355000,6950.68],[1366207421000,6946.5],[1366207487000,6948.74],[1366207553000,6949.1],[1366207619000,6950.1],[1366207685000,6950.64],[1366207751000,6950.16],[1366207817000,6949.36],[1366207883000,6950.28],[1366207949000,6950.92],[1366208015000,6947.01],[1366208081000,6946.68],[1366208147000,6945.1],[1366208213000,6940.49],[1366208279000,6941],[1366208345000,6941.92],[1366208411000,6940.79],[1366208477000,6938.13],[1366208543000,6940.11],[1366208609000,6941.44],[1366208675000,6938.81],[1366208741000,6939.83],[1366208807000,6942.09],[1366208873000,6941.54],[1366208939000,6941.58],[1366209005000,6942.39],[1366209071000,6940.98],[1366209137000,6939.87],[1366209203000,6940.65],[1366209269000,6941.29],[1366209335000,6940.24],[1366209401000,6940.26],[1366209467000,6943.39],[1366209533000,6944.74],[1366209599000,6948.32],[1366209665000,6950.42],[1366209731000,6950.06],[1366209797000,6945.72],[1366209863000,6945.49],[1366209929000,6944.25],[1366209995000,6942.01],[1366210061000,6942.06],[1366210127000,6940.87],[1366210193000,6939.34],[1366210259000,6939.76]]);
    }

$(document).ready(function() {
    $.ajaxSetup({ cache: false});
    chart();
    setInterval(function() {chart();}, 5000);
});

Answer 1

好吧，我想出了制作不同页面的解决方案，我将在页面加载方法上以 json 格式和 Response.write 生成系列，而不是使用 $.ajax 调用来调用该页面以获取数据并将其推送到系列。我还会在 1 分钟后调用该页面以获取新数据。查看我的客户端代码，这可能对某人有所帮助。

     var options = {
            chart : {
              renderTo: 'container',
            },
            credits : {enabled :0 },
            title: {
                text: null
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: { minute: '%l:%M<br>%p' },
                max: <%= MilliTimeStamp(_closingTime) %>,
                min: <%= MilliTimeStamp(_openingTime) %>,
                tickInterval: 0.5 * 3600 * 1000,
                minorTickInterval: 0.1 * 3600 * 1000,
                title: {
                    text: null
                },
                lineWidth: 1,
                minorGridLineWidth: 1,
                endOnTick : true,
                gridLineWidth: 1,
                labels : { style: {font: '7.5pt Trebuchet MS'}},
                reversed: true // true for arabic layout and false for english layout
            },
            yAxis: {
                title: {
                    text: null
                },
                tickInterval : <%= _tickIntervalY %>,
                max : <%= _maxY %>, 
                min: <%= _minY %>,
                labels : { style: {font: '7.5pt Trebuchet MS'}},
                opposite : true // true for arabic layout and false for english layout
            },
            tooltip: {
                shared: true
            },
            legend: {
                enabled: false
            },
            plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                },
                line : {
                    lineWidth: 1,
                    marker: {
                        enabled: false
                    },
                    shadow: false,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                    }
            },

            series: []
            };

       function recieveData()
       {

        $.getJSON('/_layouts/ChartDemo/AjaxTest.aspx', function(data) {        
                var series = {type: 'area',name: 'Price Index'}; // <-------------------- moved and changed to object
                series.data = data;
                options.series.push(series); // <-------- pushing series object

                var series3 = {
            type: 'line',
            name: 'Price',
            color: 'Red',
            index: -1,
            data : <%=output %>
        };

        options.series.push(series3); 
              var chart = new Highcharts.Chart(options);  
              while(chart.series.length > 2)
              chart.series[1].remove(true);
              });
       }     



    $(document).ready(function() {
      $.ajaxSetup({ cache: false });
       recieveData();
       setInterval("recieveData()", 100000);
      });