手动设置option,动态修改

 <head>

   

 

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>

<!-- highstock.js包含了highchart.js的相关功能 -->

<script type="text/javascript" src="js/highstock.js"></script>

<!-- <script type="text/javascript" src="js/highchart.js"></script> -->

<script type="text/javascript">

 

$(function () {

   var option = {

   chart:{

   renderTo:'container',

   type:'bar'

   },

   title:{

   text:'test'

   },

   xAxis:{

   categories:['Apple','Oracle','bananas']

   },

   yAxis:{

   text:'friut display'

   },

   series: [{

name: 'tomgreen',

data: [1, 2, 4] //这里的数据是和 xAxis的categoryies属性值是一致的

},{

name: 'John',

data: [5, 7, 3]

}]

   };

   

   var dynamicArr = {

   name:'dynamic add ',

   data:[11,11,22]

   }

   //动态添加option属性内容

   //要使得动态添加的内容能展现在图形上,需要在图形渲染之前添加

   option.series.push(dynamicArr);

   //绘制图形,返回对象之后,可以动态修改图形的参数

   var chartObject = new Highcharts.Chart(option);

});

 

</script>

  </head>

  

  <body>

 

<h3 style="text-align:center;">highcharts使用示例</h3>  

<div id="container" style="display:inline;width:90%;height:500px;border:1px solid red;">

 

</div>

 

 

  </body>

你可能感兴趣的:(option)