You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
184 lines
4.8 KiB
184 lines
4.8 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
<html xmlns="http://www.w3.org/1999/xhtml"> |
|
<head> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
<title> new document </title> |
|
|
|
<script src="js/jquery-1.7.1.js" type="text/javascript"></script> |
|
<script src="js/amcharts.js" type="text/javascript"></script> |
|
<script src="js/serial.js" type="text/javascript"></script> |
|
<script src="js/pie.js" type="text/javascript"></script> |
|
|
|
<style type="text/css"> |
|
.main |
|
{ |
|
width: 700px; |
|
height: 400px; |
|
border: 1px solid #ccc; |
|
margin: 0 auto; |
|
margin-top: 100px; |
|
overflow: hidden; |
|
} |
|
#cylindrical |
|
{ |
|
width: 700px; |
|
height: 400px; |
|
margin-top: -15px; |
|
} |
|
#line |
|
{ |
|
width: 700px; |
|
height: 400px; |
|
margin-top: -15px; |
|
} |
|
#pie |
|
{ |
|
width: 700px; |
|
height: 400px; |
|
margin-top: -15px; |
|
} |
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
<h2>AmChart</h2> |
|
--柱形图 |
|
<div class="main"> |
|
<div id="cylindrical"> |
|
</div> |
|
</div> |
|
<br /> |
|
--折线图 |
|
<div class="main"> |
|
<div id="line"> |
|
</div> |
|
</div> |
|
<br /> |
|
--饼图 |
|
<div class="main"> |
|
<div id="pie"> |
|
</div> |
|
</div> |
|
<script type="text/javascript"> |
|
$(document).ready(function (e) { |
|
GetSerialChart(); |
|
MakeChart(json); |
|
}); |
|
var json = [ |
|
{ "name": "数据1", "value": "35" }, |
|
{ "name": "数据2", "value": "60" }, |
|
{ "name": "数据3", "value": "22" }, |
|
{ "name": "数据4", "value": "65" }, |
|
{ "name": "数据5", "value": "35" }, |
|
{ "name": "数据6", "value": "22" }, |
|
{ "name": "数据7", "value": "43" }, |
|
{ "name": "数据8", "value": "55" } |
|
] |
|
//柱状图 |
|
function GetSerialChart() { |
|
|
|
chart = new AmCharts.AmSerialChart(); |
|
chart.dataProvider = json; |
|
//json数据的key |
|
chart.categoryField = "name"; |
|
//不选择 |
|
chart.rotate = false; |
|
//值越大柱状图面积越大 |
|
chart.depth3D = 20; |
|
//柱子旋转角度角度 |
|
chart.angle = 30; |
|
var mCtCategoryAxis = chart.categoryAxis; |
|
mCtCategoryAxis.axisColor = "#efefef"; |
|
//背景颜色透明度 |
|
mCtCategoryAxis.fillAlpha = 0.5; |
|
//背景边框线透明度 |
|
mCtCategoryAxis.gridAlpha = 0; |
|
mCtCategoryAxis.fillColor = "#efefef"; |
|
var valueAxis = new AmCharts.ValueAxis(); |
|
//左边刻度线颜色 |
|
valueAxis.axisColor = "#ccc"; |
|
//标题 |
|
valueAxis.title = "3D柱状图Demo"; |
|
//刻度线透明度 |
|
valueAxis.gridAlpha = 0.2; |
|
chart.addValueAxis(valueAxis); |
|
var graph = new AmCharts.AmGraph(); |
|
graph.title = "value"; |
|
graph.valueField = "value"; |
|
graph.type = "column"; |
|
//鼠标移入提示信息 |
|
graph.balloonText = "测试数据[[category]] [[value]]"; |
|
//边框透明度 |
|
graph.lineAlpha = 0.3; |
|
//填充颜色 |
|
graph.fillColors = "#b9121b"; |
|
graph.fillAlphas = 1; |
|
|
|
chart.addGraph(graph); |
|
|
|
// CURSOR |
|
var chartCursor = new AmCharts.ChartCursor(); |
|
chartCursor.cursorAlpha = 0; |
|
chartCursor.zoomable = false; |
|
chartCursor.categoryBalloonEnabled = false; |
|
chart.addChartCursor(chartCursor); |
|
|
|
chart.creditsPosition = "top-right"; |
|
|
|
//显示在Main div中 |
|
chart.write("cylindrical"); |
|
} |
|
//折线图 |
|
AmCharts.ready(function () { |
|
var chart = new AmCharts.AmSerialChart(); |
|
chart.dataProvider = json; |
|
chart.categoryField = "name"; |
|
chart.angle = 30; |
|
chart.depth3D = 20; |
|
//标题 |
|
//chart.addTitle("3D折线图Demo", 15); |
|
var graph = new AmCharts.AmGraph(); |
|
chart.addGraph(graph); |
|
graph.valueField = "value"; |
|
//背景颜色透明度 |
|
graph.fillAlphas = 0.3; |
|
//类型 |
|
graph.type = "line"; |
|
//圆角 |
|
graph.bullet = "round"; |
|
//线颜色 |
|
graph.lineColor = "#8e3e1f"; |
|
//提示信息 |
|
graph.balloonText = "[[name]]: [[value]]"; |
|
var categoryAxis = chart.categoryAxis; |
|
categoryAxis.autoGridCount = false; |
|
categoryAxis.gridCount = json.length; |
|
categoryAxis.gridPosition = "start"; |
|
chart.write("line"); |
|
}); |
|
//饼图 |
|
//根据json数据生成饼状图，并将饼状图显示到div中 |
|
function MakeChart(value) { |
|
chartData = eval(value); |
|
//饼状图 |
|
chart = new AmCharts.AmPieChart(); |
|
chart.dataProvider = chartData; |
|
//标题数据 |
|
chart.titleField = "name"; |
|
//值数据 |
|
chart.valueField = "value"; |
|
//边框线颜色 |
|
chart.outlineColor = "#fff"; |
|
//边框线的透明度 |
|
chart.outlineAlpha = .8; |
|
//边框线的狂宽度 |
|
chart.outlineThickness = 1; |
|
chart.depth3D = 20; |
|
chart.angle = 30; |
|
chart.write("pie"); |
|
} |
|
</script> |
|
|
|
</body> |
|
</html>
|
|
|