amchart 图表设置
官网:https://www.amcharts.com/demos/
属性介绍:https://docs.amcharts.com/3/javascriptcharts/AmLegend
安装
bower install amcharts3
npm install amcharts/amcharts3、
<link rel="stylesheet" href="scripts/lib/amcharts3/amcharts/plugins/export/export.css"/> <!--amchart--> |
基础用法
<div id="chartdiv" class="chart"></div> AmCharts.makeChart("chartdiv", { |
动画
- "sequencedAnimation": false, //设置图表没有动画
- startDuration: 0, //设置饼图没有动画
valueAxes(Y轴)
gridAlpha: 0 //网格透明度
"axisColor": "#56707C", //Y轴线颜色
- "color": "#90a4aa", //Y轴字体
"gridAlpha": 0.4, //平行X轴的图表内线条粗细
categoryAxis(X轴)
fillAlpha:0.05 //折线图 图形后边的 背景,默认是透明颜色,不会出现看似柱状图的背景
gridCount:10 //标签个数--可自定义为值数组的长度
autoGridCount: false, //是否允许自动设置X轴标签
labelRotation: 40 //标签的倾斜角度
设置X轴的标签样式:
labelFunction: function (value, valueText, valueAxis) {
if (value) {
return $filter('date')(new Date(value), 'MMM yyyy');
}
}
graphs(图形):[{}]
{ |
- "bullet": "none" "round" "square",
- "bulletSize": 5 //折线图是否有折点,显示多大
- "animationPlayed": true //出现柱状图/折线图时没有动画
- "type": "column", //柱状图"
- labelText": "[[value]]", //柱状图上显示值
- "color": "#fff", //柱状图上显示值的颜色
- hidden: true, //折线是否可见
- visibleInLegend: false //图例是否可见
饼图标签显示
"labelsEnabled": false //饼图上不显示标签:
设置饼图显示标签样式:
"labelFunction": function (value, valueText, valueAxis) {
return parseFloat(value.percents).toFixed(1) + '%'
}
图表图例
"legend": { |
当数据需定时刷新时,只是刷新数据而不是刷新图表
首先简单创建一个图表: |
amchart 图表设置的更多相关文章
- 导出Excel之Epplus使用教程3(图表设置)
导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...
- 对Iframe和图表设置高度的优质代码
//对Iframe和图表设置高度 function f() { parent.window.setWinHeight(parent.window.document.getElementById(&qu ...
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- echart封装,前端简单路由,图表设置自动化
https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...
- 如何在ASP.Net创建各种3D图表
我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...
- Python 绘制图表之我见 ---一个java程序员的看法
---------------- 环境: win 10 . python3.5 https://github.com/Leechen2014/1400OS_01_Codes/blob/master/ ...
- 充分利用 SQL Server Reporting Services 图表
最近在查SSRS的一些文章,看到MSDN在有一篇不错的文章,许多图表设置都有说明,共享给大家.. 其中有说明在SSRS中如果去写条件表达写和报表属性中的“自定义代码”,文章相对比较长,需要大家耐心的查 ...
- 导出Excel之Epplus使用教程2(样式设置)
导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...
- 导出Excel之Epplus使用教程4(其他设置)
导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...
随机推荐
- MySql笔记之操作数据库
看前引导 ♦MySQL默认的端口号:3306 ♦MySQL中的超级用户:root ♦SQL语句结尾必须以分号结尾 ♦语法使用介绍 花括号 必须有的部分 中括号 可选项 ,可有可无 竖线 从这个当 ...
- XML签名
英文:https://www.javacodegeeks.com/2013/10/xml-security-with-digital-signature-in-java.html 中文:http:// ...
- BZOJ2038 [2009国家集训队]小Z的袜子(hose)(莫队算法)
神奇的莫队算法,用来解决可离线无修改的区间查询问题: 首先对原序列进行分块,√n块每块√n个: 然后对所有查询的区间[l,r]进行排序,首先按l所在的块序号升序排序,如果一样就按r升序排序: 最后就按 ...
- 【bzoj1001】【最短路】【对偶图】【最大流转最小割】狼抓兔子题解
[BZOJ1001]狼抓兔子 1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 18872 Solved ...
- ttServer缓存的简单使用
ttserver是一款 DBM 数据库,该数据库读写非常快,哈希模式写入100万条数据只需0.643秒,读取100万条数据只需0.773秒,是 Berkeley DB 等 DBM 的几倍.利用Toky ...
- NDK安装教程 not a valid ndk directory -- Eclipse
第一步:下载 Eclipse IDE for Java Developers http://www.eclipse.org/downloads/ 第二步:下载CDT http://www.eclips ...
- 【转载】 GNU GCC 选项说明
GCC 1 Section: GNU Tools (1) Updated: 2003/12/05 Sponsor: GCC Casino Winning Content NAME gcc,g++-GN ...
- Word中更新交叉引用
方法一:选择要更新的域,按F9键即可. 方法二:右键单击要更新的域,在弹出的右键菜单中选择“更新域”即可. 方法三:若域位于一个含有“更新”按钮的特定容器中,则点击“更新”即可.
- 使用React开发
阅读目录 React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultProps && getInitialState 获取真实的DOM节点 ...
- 去掉wget烦人的 “eta(英国中部时间)” 提示
gentoo 里的 wget ,从1.12版本开始,就一直有个不影响功能的小毛病:由于中文翻译的失误,进度提示的时候,会被拉成很多行.原因就是原来英文的ETA这3个字母,被翻译成了 “eta(英国中部 ...