您的位置：首页 > 其它

Amcharts插件实现柱状图+折线图+多个主题

2018-01-18 00:00 344 查看
实现多主题切换其实和单主题的实现方法相同，只需要引入封装好的/自定义的主题文件。常见的主题样式和详细的使用方法法可以从官网下载：https://www.amcharts.com

本例只展示主要的HTML页面，其他引用资料可从提供的官网下载或者jQuery插件库下载。

准备工作：

1.引用封装好的amcharts.js文件和css样式表；

2.在页面上创建一个div容器存放折线图；

3.引用多个自定义主题js

注意：

在页面的head部分我们需要添加amCharts JavaScript库文件的引用。由于V3 amCharts库被拆分成了几个文件，为了节省几个kb空间—你需要添加amchart.js主文件，并根据你的需求来决定添加一个或者多个图表文件。柱形图属于序列图的一种，因此我们包含这两个js文件：

<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>

添加顺序很重要，amcharts.js应该放在最前面。

控制台展示文档结构如下：



前端页面：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>amCharts examples</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/serial.js" type="text/javascript"></script>
<!-- 添加自定义的主题样式 -->
<script src="amcharts/themes/light.js" type="text/javascript"></script>
<script src="amcharts/themes/dark.js" type="text/javascript"></script>
<script src="amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="amcharts/themes/patterns.js" type="text/javascript"></script>
<script type="text/javascript">

// 创建图表，为图表设置一种默认的主题
var chart;
makeCharts("light", "#FFFFFF","");

//当修改了图表的显示主题，则需要清除原来的主题，重新渲染新的主题

function makeCharts(theme, bgColor, bgImage){

if(chart){
chart.clear();
}
// 背景
if(document.body)

{
document.body.style.backgroundColor = bgColor;
document.body.style.backgroundImage = "url(" + bgImage + ")";
}

// 定义图表中各参数
chart = AmCharts.makeChart("chartdiv1", {
type: "serial",
theme:theme,                         //主题  注意这里定义的不是单一的主题
dataProvider: [{
"year": 2008,
"income": 23.5,
"expenses": 18.1
}, {
"year": 2009,
"income": 26.2,
"expenses": 22.8
}, {
"year": 2010,
"income": 30.1,
"expenses": 23.9
}, {
"year": 2011,
"income": 29.5,
"expenses": 25.1
}, {
"year": 2012,
"income": 24.6,
"expenses": 25
}, {
"year": 2013,
"income": 26.6,
"expenses": 25
}, {
"year": 2014,
"income": 29.6,
"expenses": 25
}, {
"year": 2015,
"income": 34.6,
"expenses": 35
}, {
"year": 2016,
"income": 21.6,
"expenses": 21
}, {
"year": 2017,
"income": 29.6,
"expenses": 15
}, {
"year": 2018,
"income": 54.6,
"expenses": 21
}],
categoryField: "year",
startDuration: 1,

categoryAxis: {
gridPosition: "start"
},
valueAxes: [{
title: "毕业生收入状态状态统计表"
}],
graphs: [{
type: "column",
title: "Income",
valueField: "income",
lineAlpha: 1,
fillAlphas: 0.3,

//balloonText鼠标跟随显示在页面中的值
balloonText: "[[title]] in [[category]]:<b>[[value]]</b>" }, {
type: "line",
title: "Expenses",
valueField: "expenses",
lineThickness: 2,
fillAlphas: 0,
bullet: "round",
balloonText: "[[title]] in [[category]]:<b>[[value]]</b>"
}],

//图例
legend: {
useGraphSettings: true
}

});
}
</script>
</head>

<body style="font-size:15px;">Select theme:
<a href="#" onclick="makeCharts('light', '#ffffff');">Light</a> |
<a href="#" onclick="makeCharts('dark', '#282828')">Dark</a> |
<a href="#" onclick="makeCharts('patterns', '#ffffff')">Patterns</a> |
<a href="#" onclick="makeCharts('chalk', '#282828', 'images/board.jpg')">Chalk</a>
<div id="chartdiv1" style="width: 600px; height: 400px;"></div>
</body>

</html>


展示效果： Light



Ddark：



Patterns



Chalk

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  多主题折线图 Amcharts
相关文章推荐
新的分享
章节导航