1.highcharts需要的文档引用
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
2.highcharts的使用
全局图表样式的统一,可参见
http://www.highcharts.com/docs/getting-started/how-to-set-options
http://www.highcharts.com/docs/chart-design-and-style/themes
https://github.com/highslide-software/highcharts.com/tree/master/js/themes.
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<input type="button" id="addbt" value="addbar"/>
<div class="container">
<div class="row">
<div id="widget_01" class="col-md-6"></div>
<div id="widget_02" class="col-md-6"></div>
</div>
</div>
</div>
</body>
<script src="jss/bootstrap.min.js"></script>
<script src="jss/highcharts.js"></script>
<script src="jss/modules/exporting.js"></script>
<script src="jss/themes/grid-light.js"></script>
<script>
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
var barOptions={
chart:{
renderTo:'widget_01',
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]
}]
};
var columnOptions={
chart: {
renderTo: 'widget_02',
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
};
$(document).ready(function(e) {
var chart1=new Highcharts.Chart(barOptions);
var chart2=new Highcharts.Chart(columnOptions);
$("#addbt").bind("click",function(){
barOptions.series.push({name:"Jo",data:[3,4,2]});
chart1.addSeries({name:"Jo",data:[3,4,2]});//在线更新chart1
});
});
</script>
</html>
jquery 动态加载的li click事件不被执行的解决办法
$(".gridster").delegate("li","click",function(){
alert($(this).html());
})
$(document).on("click","li",function(){});