Highcharts动态更新的Highstock图表不显示条形图

我是JQuery和Highcharts的初学者。我遵循Highchart的highstock演示，创建一个基本的html页面来显示Highstock的动态更新图表。我从一张条形图开始，它可以工作，但是当我添加一张Highstock图表时，它不再工作。我真的不明白为什么。请帮忙。谢谢！Highcharts动态更新的Highstock图表不显示条形图

这个简单的条形图工程！

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Index - My ASP.NET Application</title> 
    <link href="/Content/bootstrap.css" rel="stylesheet"/> 
    <link href="/Content/site.css" rel="stylesheet"/> 
    <script src="/Scripts/modernizr-2.6.2.js"></script> 


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/highcharts-more.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <script src="http://code.highcharts.com/stock/highstock.js"></script> 
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 
    <script>$(function() { 
    $('#bar').highcharts({ 
     chart: { 
      type: 'bar' 
     }, 
     title: { 
      text: 'Fruit Consumption' 
     }, 
     xAxis: { 
      categories: ['Apples', 'Bananas', 'Oranges'] 
     }, 
     yAxis: { 
      title: { 
       text: 'Fruit eaten' 
      } 
     }, 
     series: [{ 
      name: 'Jane', 
      data: [1, 0, 4] 
     }, { 
      name: 'John', 
      data: [5, 7, 3] 
     }] 
    }); 
});</script> 


</head> 
<body> 

<div id="bar" style="width:100%; height:400px;"></div> 


</body> 
</html>

然后将动态更新脚本头：

$(function() { 

    Highcharts.setOptions({ 
     global : { 
      useUTC : false 
     } 
    }); 

    // Create the chart 
    $('#realtime').highcharts('StockChart', { 
     chart : { 
      events : { 
       load : function() { 

        // set up the updating of the chart each second 
        var series = this.series[0]; 
        setInterval(function() { 
         var x = (new Date()).getTime(), // current time 
         y = Math.round(Math.random() * 100); 
         series.addPoint([x, y], true, true); 
        }, 1000); 
       } 
      } 
     }, 

     rangeSelector: { 
      buttons: [{ 
       count: 1, 
       type: 'minute', 
       text: '1M' 
      }, { 
       count: 5, 
       type: 'minute', 
       text: '5M' 
      }, { 
       type: 'all', 
       text: 'All' 
      }], 
      inputEnabled: false, 
      selected: 0 
     }, 

     title : { 
      text : 'Live random data' 
     }, 

     exporting: { 
      enabled: false 
     }, 

     series : [{ 
      name : 'Random data', 
      data : (function() { 
       // generate an array of random data 
       var data = [], time = (new Date()).getTime(), i; 

       for(i = -999; i <= 0; i++) { 
        data.push([ 
         time + i * 1000, 
         Math.round(Math.random() * 100) 
        ]); 
       } 
       return data; 
      })() 
     }] 
    }); 

});

和这个div到身体：

，并停止工作，如下图所示：

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>Index - My ASP.NET Application</title> 
     <link href="/Content/bootstrap.css" rel="stylesheet"/> 
     <link href="/Content/site.css" rel="stylesheet"/> 
     <script src="/Scripts/modernizr-2.6.2.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
     <script src="http://code.highcharts.com/highcharts.js"></script> 
     <script src="http://code.highcharts.com/highcharts-more.js"></script> 
     <script src="http://code.highcharts.com/modules/exporting.js"></script> 
     <script src="http://code.highcharts.com/stock/highstock.js"></script> 
     <script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 
     <script> 
    $(function() { 

     Highcharts.setOptions({ 
      global : { 
       useUTC : false 
      } 
     }); 

     // Create the chart 
     $('#realtime').highcharts('StockChart', { 
      chart : { 
       events : { 
        load : function() { 

         // set up the updating of the chart each second 
         var series = this.series[0]; 
         setInterval(function() { 
          var x = (new Date()).getTime(), // current time 
          y = Math.round(Math.random() * 100); 
          series.addPoint([x, y], true, true); 
         }, 1000); 
        } 
       } 
      }, 

      rangeSelector: { 
       buttons: [{ 
        count: 1, 
        type: 'minute', 
        text: '1M' 
       }, { 
        count: 5, 
        type: 'minute', 
        text: '5M' 
       }, { 
        type: 'all', 
        text: 'All' 
       }], 
       inputEnabled: false, 
       selected: 0 
      }, 

      title : { 
       text : 'Live random data' 
      }, 

      exporting: { 
       enabled: false 
      }, 

      series : [{ 
       name : 'Random data', 
       data : (function() { 
        // generate an array of random data 
        var data = [], time = (new Date()).getTime(), i; 

        for(i = -999; i <= 0; i++) { 
         data.push([ 
          time + i * 1000, 
          Math.round(Math.random() * 100) 
         ]); 
        } 
        return data; 
       })() 
      }] 
     }); 

    }); 
    </script> 
     <script>$(function() { 
     $('#bar').highcharts({ 
      chart: { 
       type: 'bar' 
      }, 
      title: { 
       text: 'Fruit Consumption' 
      }, 
      xAxis: { 
       categories: ['Apples', 'Bananas', 'Oranges'] 
      }, 
      yAxis: { 
       title: { 
        text: 'Fruit eaten' 
       } 
      }, 
      series: [{ 
       name: 'Jane', 
       data: [1, 0, 4] 
      }, { 
       name: 'John', 
       data: [5, 7, 3] 
      }] 
     }); 
    });</script> 


    </head> 
    <body> 
    <div id="bar" style="width:100%; height:400px;"></div> 
    <div id="realtime" style="height: 500px; min-width: 500px"></div> 

    </body> 
    </html>

请帮忙！谢谢！

来源

2014-01-30 user2952473

首先，您只需要包含highstock.js或highcharts.js。我想说的只是包括高炉，因为它也包括所有高炉类型。

来源

2014-01-30 21:16:21 wergeld

它现在有效！谢谢。 – user2952473

Highcharts动态更新的Highstock图表不显示条形图

回答

相关问题