highcharts demo highcharts开源图表js图表
程序员文章站
2022-05-30 12:01:38
...
公司项目需要用到图表，经过简单对比，就写了个demo
highcharts和iChartjs对比如下：
iChartjs
国内开源图形组件
实现方式：html5 canvas（IE6,7,8不支持）
优点：使用方便，柱形图、饼图都支持3D显示
缺点：该控件2012年底发布，目前只有两个版本。图形种类少，图表种类不丰富
独立的，不依赖jquery
Highcharts（友盟统计使用该方式）
国外优秀免费开源
实现方式：svg（所有平台都支持）
优点：支持多种复杂类型图表
缺点：不支持3D图表，商用收费
注：flash跨平台性较差，并且移动设备不支持，html5是趋势，并且html5绘制的图表效果并不逊色于flash，所以不采用flash方式，故不作比较。
简单的一个静态页面，直接上代码，呵呵
html代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 type="text/javascript">
$(function() {
$('#chart1').highcharts({
chart : {
type : 'column'
},
title : {
text : '柱状图(点击柱形可在下方生成子图)'
},
subtitle : {
text : '点击底部颜色块可显示隐藏相关柱状图'
},
xAxis : {
categories : [ 'Apples', 'Bananas', 'Oranges' ]
},
yAxis : {
title : {
text : 'Fruit eaten'
}
},
series : [ {
name : 'Jane',
data : [ 1, 0, 4 ]
}, {
name : 'John',
data : [ 5, 7, 3 ]
}, {
name : 'Lily',
data : [ 3, 4, 8 ]
} ],
plotOptions:{
series: {
cursor: 'pointer',
events: {
click: function(event) {
childrenChart(this.name);
}
}
}
}
});
$('#chart2').highcharts({
chart : {
type : 'line'
},
title : {
text : '线状图'
},
subtitle : {
text : '点击底部颜色块可显示隐藏相关线条'
},
xAxis : {
categories : [ 'Apples', 'Bananas', 'Oranges' ]
},
yAxis : {
title : {
text : 'Fruit eaten'
}
},
series : [ {
name : 'Jane',
data : [ 1, 0, 4 ]
}, {
name : 'John',
data : [ 5, 7, 3 ]
}, {
name : 'Lily',
data : [ 3, 4, 8 ]
} ]
});
});
function childrenChart(seriesName){
$('#chart1Children').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: seriesName+'(子图，饼图)'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
['Firefox', 45.0],
['IE', 26.8],
{
name: 'Chrome',
y: 12.8,
sliced: true,
selected: true
},
['Safari', 8.5],
['Opera', 6.2],
['Others', 0.7]
]
}]
});
}
</script>
<title>Insert title here</title>
</head>
<body>
<div id="chart1" style="width: 60%; height: 400px; margin: 0 auto"></div>
<div id="chart1Children" style="width: 50%; height: 300px; margin: 0 auto;"></div>
<div id="chart2" style="width: 60%; height: 400px; margin: 0 auto"></div>
</body>
</html>