官网: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-->
<script src="scripts/lib/amcharts3/amcharts/amcharts.js"></script>
<script src="scripts/lib/amcharts3/amcharts/serial.js"></script> //折线图 柱状图
<script src="scripts/lib/amcharts3/amcharts/pie.js"></script> //饼图
<script src="scripts/lib/amcharts3/amcharts/plugins/export/export.min.js"></script>
<script src="scripts/lib/amcharts3/amcharts/themes/light.js"></script>

基础用法

<div id="chartdiv" class="chart"></div>

AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"colors": [
"#78eeff",
"#ff5dfd",
"#a970ff",
"#1b9cff",
"#38cf91",
"#eaf135",
"#ff8625",
"#ff5555"
],
"fontSize": 12,
"dataProvider": lineRowCallDropRateData, //值
"sequencedAnimation": false, //设置图表没有动画
"startDuration": 0.5,
"graphs": [{
"balloonText": "Profit: <b>[[value]]</b>",
"title": "Profit",
"valueField": "Profit", //柱状图 值的来源键名
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"type": "column", //柱状图
"labelText": "[[value]]", //柱状图上显示值
"color": "#fff", //柱状图上显示值的颜色
animationPlayed: true //柱状图没有动画
}],
"chartCursor": {
"cursorAlpha": 0
},
"categoryField": "category",
"valueAxes": [{
"axisThickness": 1,
"axisAlpha": 1,
"gridAlpha": 0.4, //平行X轴的图表内线条粗细
"gridColor": "#596F79",
"position": "left",
"axisColor": "#56707C", //Y轴线颜色
"color": "#90a4aa", //Y轴字体
minimum: 0
}],
"categoryAxis": {
"gridPosition": "start",
"axisAlpha": 1,
"fillAlpha": 0.05,
"gridAlpha": 0,
"axisColor": "#56707C", //X轴线颜色
"color": "#90a4aa", //X轴字体
gridCount: lineRowCallDropRateData.length,
autoGridCount: false,
labelRotation: 40 //标签的倾斜角度
},
"export": {
"enabled": true
},
"legend": {
"enabled": true,
"color": "#fff",
"useGraphSettings": true,
"position": "top",
"align": "right",
"valueWidth": 0,
"fontSize": 12, //图表右上角 线段文字大小
"markerSize": 16
}
})

动画

  • "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(图形):[{}]

{
"balloonText": oneTechnology.DisplayName + ": <b>[[value]]</b>",
"bullet": graphType, //折线图中折点显示图标
"bulletSize": 7,
"title": oneTechnology.DisplayName,
"valueField": oneTechnology.DisplayName,
"fillAlphas": 0,
"lineThickness": 3, //折线的粗细程度
"animationPlayed": true,
hidden: true, //折线是否可见
visibleInLegend: false //图例是否可见
}
  • "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": {
"enabled": true,
"color": "#fff",
"useGraphSettings": true,
"position": "top",
"fontSize": fontSize, // 图例字体大小
"align": "right",
markerSize: markerSize // 图例图标大小
equalWidths:false, //图例是否保持等宽
"valueWidth": 0, //值显示的宽度,等于0时不显示值
}

当数据需定时刷新时,只是刷新数据而不是刷新图表

首先简单创建一个图表:
var loadComplainChart = AmCharts.makeChart("chartcomplaindiv", {
"theme": "dark",
"type": "serial",
"colors": [
"#00FCFC"
],
"dataProvider": dailyUserComplain,
} 当数据在刷新变化时,只需要改变data就可以了:
loadComplainChart.dataProvider = dailyUserComplain;
loadComplainChart.validateData(); 当设置只刷新数据时,会发现之前设置的X轴标签样式会失效,这时我们需要重新定义X轴标签的个数以及是否需要自动显示X轴标签:
loadComplainChart.categoryAxis.autoGridCount = false;
loadComplainChart.categoryAxis.gridCount = dailyUserComplain.length;

amchart 图表设置的更多相关文章

  1. 导出Excel之Epplus使用教程3(图表设置)

    导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...

  2. 对Iframe和图表设置高度的优质代码

    //对Iframe和图表设置高度 function f() { parent.window.setWinHeight(parent.window.document.getElementById(&qu ...

  3. ECharts 图表设置标记的大小 symbolSize 和获取标记的值

    ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  4. echart封装,前端简单路由,图表设置自动化

    https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,an ...

  5. 如何在ASP.Net创建各种3D图表

    我们都知道,图表在ASP.NET技术中是一种特别受欢迎而又很重要的工具.图表是表示数据的图形,一般含有X和Y两个坐标轴.我们可以用折线,柱状,块状来表示数据.通过图表控件,我们即能表示数据又能比较各种 ...

  6. Python 绘制图表之我见 ---一个java程序员的看法

    ---------------- 环境: win 10  . python3.5 https://github.com/Leechen2014/1400OS_01_Codes/blob/master/ ...

  7. 充分利用 SQL Server Reporting Services 图表

    最近在查SSRS的一些文章,看到MSDN在有一篇不错的文章,许多图表设置都有说明,共享给大家.. 其中有说明在SSRS中如果去写条件表达写和报表属性中的“自定义代码”,文章相对比较长,需要大家耐心的查 ...

  8. 导出Excel之Epplus使用教程2(样式设置)

    导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...

  9. 导出Excel之Epplus使用教程4(其他设置)

    导出Excel之Epplus使用教程1(基本介绍) 导出Excel之Epplus使用教程2(样式设置) 导出Excel之Epplus使用教程3(图表设置) 导出Excel之Epplus使用教程4(其他 ...

随机推荐

  1. MySql笔记之操作数据库

    看前引导 ♦MySQL默认的端口号:3306 ♦MySQL中的超级用户:root ♦SQL语句结尾必须以分号结尾 ♦语法使用介绍 花括号  必须有的部分 中括号  可选项 ,可有可无 竖线  从这个当 ...

  2. XML签名

    英文:https://www.javacodegeeks.com/2013/10/xml-security-with-digital-signature-in-java.html 中文:http:// ...

  3. BZOJ2038 [2009国家集训队]小Z的袜子(hose)(莫队算法)

    神奇的莫队算法,用来解决可离线无修改的区间查询问题: 首先对原序列进行分块,√n块每块√n个: 然后对所有查询的区间[l,r]进行排序,首先按l所在的块序号升序排序,如果一样就按r升序排序: 最后就按 ...

  4. 【bzoj1001】【最短路】【对偶图】【最大流转最小割】狼抓兔子题解

    [BZOJ1001]狼抓兔子 1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 18872  Solved ...

  5. ttServer缓存的简单使用

    ttserver是一款 DBM 数据库,该数据库读写非常快,哈希模式写入100万条数据只需0.643秒,读取100万条数据只需0.773秒,是 Berkeley DB 等 DBM 的几倍.利用Toky ...

  6. NDK安装教程 not a valid ndk directory -- Eclipse

    第一步:下载 Eclipse IDE for Java Developers http://www.eclipse.org/downloads/ 第二步:下载CDT http://www.eclips ...

  7. 【转载】 GNU GCC 选项说明

    GCC 1 Section: GNU Tools (1) Updated: 2003/12/05 Sponsor: GCC Casino Winning Content NAME gcc,g++-GN ...

  8. Word中更新交叉引用

    方法一:选择要更新的域,按F9键即可. 方法二:右键单击要更新的域,在弹出的右键菜单中选择“更新域”即可. 方法三:若域位于一个含有“更新”按钮的特定容器中,则点击“更新”即可.

  9. 使用React开发

    阅读目录 React的组件生命周期 JSX 语法 父组件传向子组件 子组件传向父(爷)组件 getDefaultProps && getInitialState 获取真实的DOM节点 ...

  10. 去掉wget烦人的 “eta(英国中部时间)” 提示

    gentoo 里的 wget ,从1.12版本开始,就一直有个不影响功能的小毛病:由于中文翻译的失误,进度提示的时候,会被拉成很多行.原因就是原来英文的ETA这3个字母,被翻译成了 “eta(英国中部 ...