<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>