-
Notifications
You must be signed in to change notification settings - Fork 0
/
amchartzhu.html
55 lines (48 loc) · 2.31 KB
/
amchartzhu.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<title>amcharts</title>
<!-- 导入Amcharts js 库 -->
<!-- Resources -->
<script src="amcharts/amcharts.js"></script>
<script src="amcharts/serial.js"></script>
<script src="amcharts/export.min.js"></script>
<link rel="stylesheet" href="amcharts/export.css" type="text/css" media="all" />
<script src="amcharts/light.js"></script>
<script>
var fun1 = function(){
var chartData = [{ country: "USA", visits: 252 },
{ country: "China", visits: 382 },
{ country: "Japan", visits: 209 },
{ country: "Germany", visits: 322 },
{ country: "UK", visits: 122 },
];
//AmSerialChart 类
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData; //指定数据源
chart.categoryField = "country"; //数据的分类
//创建
var graph = new AmCharts.AmGraph();
graph.valueField = "visits"; //数值字段名称
graph.type = "column"; //列名称 后面代码是折线面积图graph.type = "line";graph.fillAlphas = 0.5;
chart.addGraph(graph);
graph.fillAlphas = 0.8;//填充柱形图的颜色
// chart.angle = 30;
// chart.depth3D = 15;//控制列的深度和角度
graph.balloonText = "[[category]]: <b>[[value]]</b>";//在数值前面加上国家名
// graph.fillAlphas = 0; // 或者删除这一行, 因为0是默认值
// graph.bullet = "round";
graph.lineColor = "#8d1cc6";
var categoryAxis = chart.categoryAxis;
categoryAxis.autoGridCount = false;//设置为false，否则gridount属性会被忽略。
categoryAxis.gridCount = chartData.length;
categoryAxis.gridPosition = "start";
categoryAxis.labelRotation = 90;//图形下面的文字旋转90度。
// credits.enabled=false;
chart.write(document.getElementById("chartContainer")); //write 到 div 中
}
</script>
</head>
<body onload="fun1()">
<div id="chartContainer" style="width: 240px; height: 200px;"></div>
</body>
</html>