2013-04-17 82 views
1

我想在C#頁面下面的代碼嘗試,但我的highcharts無法自動重繪。 它始終與第一次加載時保持相同的圖表。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); 
}); 

+0

但你是否曾經叫過AJAX?我可以看到你將緩存設置爲false,但我沒有看到任何類似$ .ajax()或$ .get()的內容。 –

+0

我刪除了$ .ajax(),但它仍然不起作用 – Milind

回答

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); 
     });