文档章节

amCharts JavaScript Charts创建3D柱形图

咲晚杍
 咲晚杍
发布于 2013/09/17 11:00
字数 510
阅读 1101
收藏 2

创建一个容器

我们将这个容器命名为“chartContainer”,参考以下代码:

<body>
    <div id="chartContainer" style="width: 640px; height: 400px;"></div>
</body>

引用JavaScript库

在HEAD部分,引用amCharts JavaScript库:

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

添加数据

引用一组JavaScript对象:

<script type="text/javascript">
    var chartData = [{ country: "USA", visits: 4252 },
                { country: "China", visits: 1882 },
                { country: "Japan", visits: 1809 },
                { country: "Germany", visits: 1322 },
                { country: "UK", visits: 1122 },
                { country: "France", visits: 1114 },
                { country: "India", visits: 984 },
                { country: "Spain", visits: 711 },
                { country: "Netherlands", visits: 665 },
                { country: "Russia", visits: 580 },
                { country: "South Korea", visits: 443 },
                { country: "Canada", visits: 441 },
                { country: "Brazil", visits: 395 },
                { country: "Italy", visits: 386 },
                { country: "Australia", visits: 384 },
                { country: "Taiwan", visits: 338 },
                { country: "Poland", visits: 328}];
</script>

创建柱状图

首先我们需要为图表创建一个AmCharts.AmSerialChart对象,设置它的dataProvider和categoryField属性。 顾名思义,dataProvider用于指定图表的数据源,categoryField控制数据对象的字段。

var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "country";

接下来我们需要添加一个graph到图表中。一个图表可以有多个graph,但本例我们只用一个graph。指定valueField,设置type字段为“column”,这样我们就可以创建一个柱状图了。

var graph = new AmCharts.AmGraph();
graph.valueField = "visits"
graph.type = "column";
chart.addGraph(graph);

最后调用 write()方法将图表写入 “chartContainer” 中:

chart.write('chartContainer');

效果图:

 

自定义轴标签

在上图中,X轴上并未标出每一列的名称,这样肯定不行,那我们就调整categoryAxis的gridCount属性:

var catAxis = chart.categoryAxis;
catAxis.gridCount = chartData.length;

会得到以下结果:

 

这些标签都挤到一起了,那我们可以尝试用categoryAxis的labelRotation属性将标签旋转90度:

var catAxis = chart.categoryAxis;
catAxis.gridCount = chartData.length;
catAxis.labelRotation = 90;


结果标签字段被截取掉了一部分,那需要设置图表的margins:

chart.marginTop = 15;
chart.marginLeft = 55;
chart.marginRight = 15;
chart.marginBottom = 80;

这样就没有问题了:


填充颜色&3D效果

首先填充柱子的颜色并隐藏它们的边框:

graph.lineAlpha = 0;
graph.fillAlphas = 0.8;

然后将平面的柱状图变为3D效果,depth3D属性控制柱子的深度和角度,也就是3D方向:

chart.angle = 30;
chart.depth3D = 15;

终于,3D柱状图的效果就出来了:

 

本文转载自:http://www.evget.com/zh-CN/Info/catalog/18720.html

咲晚杍
粉丝 7
博文 75
码字总数 8143
作品 0
渝中
私信 提问
使用JavaScript/HTML5 Charts创建3D柱状图

JavaScript/HTML5 Charts是amCharts下的一款JS图表控件,它支持多种图表类型和浏览器,是移动图表开发利器。今天为大家介绍一下如何用JavaScript/HTML5 Charts创建简单的3D柱状图,以下是详细...

牛奶哎营养
2013/12/17
498
3
35款免费的 Javascript Flash Web 图表

Flot - Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。 Open Flash Chart - Open Flash Chart 是一个 Flash 图表组件,很容易安装...

SeanCai
2011/10/11
934
0
amCharts JavaScript Charts

amCharts提供您最需要的JavaScript/HTML5图表。一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼/甜甜圈,雷达/极性和XY /分散/气泡图。amCharts的图表提供了无与伦比的功...

zkjava
2012/02/22
392
0
amCharts 3.9.0 地图和图表版本号终于同步了

一直觉得amCharts的图表和地图更新都差不多,可是版本号却是不同的,有点奇异,现在场上终于醒悟了。 下面是厂商的公告及更更新内容(原文): amCharts所有产品: JavaScript Charts & Java...

咲晚杍
2014/05/29
346
0
给开发者提供的 35 款 JavaScript 图形图表库

图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化 理解,可视化复杂的数据和 web 应用工作流...

oschina
2014/02/24
60.8K
13

没有更多内容

加载失败,请刷新页面

加载更多

Replugin借助“UI进程”来快速释放Dex

public static boolean preload(PluginInfo pi) { if (pi == null) { return false; } // 借助“UI进程”来快速释放Dex(见PluginFastInstallProviderProxy的说明) return PluginFastInsta......

Gemini-Lin
今天
4
0
Hibernate 5 的模块/包(modules/artifacts)

Hibernate 的功能被拆分成一系列的模块/包(modules/artifacts),其目的是为了对依赖进行独立(模块化)。 模块名称 说明 hibernate-core 这个是 Hibernate 的主要(main (core))模块。定义...

honeymoose
今天
4
0
CSS--属性

一、溢出 当内容多,元素区域小的时候,就会产生溢出效果,默认是纵向溢出 横向溢出:在内容和容器之间再套一层容器,并且内部容器要比外部容器宽 属性:overflow/overflow-x/overflow-y 取值...

wytao1995
今天
4
0
精华帖

第一章 jQuery简介 jQuery是一个JavaScript库 jQuery具备简洁的语法和跨平台的兼容性 简化了JavaScript的操作。 在页面中引入jQuery jQuery是一个JavaScript脚本库,不需要特别的安装,只需要...

流川偑
今天
7
0
语音对话英语翻译在线翻译成中文哪个方法好用

想要进行将中文翻译成英文,或者将英文翻译成中文的操作,其实有一个非常简单的工具就能够帮助完成将语音进行翻译转换的软件。 在应用市场或者百度手机助手等各大应用渠道里面就能够找到一款...

401恶户
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部