官网: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. Python与数据结构[0] -> 链表/LinkedList[2] -> 链表有环与链表相交判断的 Python 实现

    链表有环与链表相交判断的 Python 实现 目录 有环链表 相交链表 1 有环链表 判断链表是否有环可以参考链接, 有环链表主要包括以下几个问题(C语言描述): 判断环是否存在: 可以使用追赶方法, ...

  2. csu1811(树上启发式合并)

    csu1811 题意 给定一棵树,每个节点有颜色,每次仅删掉第 \(i\) 条边 \((a_i, b_i)\) ,得到两颗树,问两颗树节点的颜色集合的交集. 分析 转化一下,即所求答案为每次删掉 \( ...

  3. 洛谷 P2183 [国家集训队]礼物

    题目描述 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E心目中的重要性不同,在小E心中分量越重的人,收到的礼物会越多.小E从商店中购买了n件礼物 ...

  4. POJ1655 Balancing Act(树的重心)

    树的重心即树上某结点,删除该结点后形成的森林中包含结点最多的树的结点数最少. 一个DFS就OK了.. #include<cstdio> #include<cstring> #i ...

  5. Map泛型集合-国家中文和英文的键值映射

    package collection; import java.util.HashMap; import java.util.Map; public class Test5 { public stat ...

  6. SQL 统计某一列出现的总和

    现有数据如上图所示,要求统计出日期相同的Count总数,并且加一列统计前面日期Count的总和 SELECT SUM([Count]) AS DayTotal, SUM(SUM([Count])) o ...

  7. System对象

    System:类中的方法和属性都是静态的 out:标准输出,默认是控制台 in:标准输入.默认是键盘 System:描述系统的一些信息. 获取系统属性信息:Properties getProperti ...

  8. 在VisualStudio 工具箱中隐藏用户控件

    当我们创建一个用户控件后,VisualStudio会自动将其添加到工具箱中,本来这是一个比较贴心的设计.但是,有的时候,我们并不想将用户控件放到工具箱中. 例如:在WPF中,为了避免一个页面的控件过多 ...

  9. SQL数据库学习系列之一

    数据库知识的重要性不言而喻,以下链接给出了最最基础知识的讲解. 第一讲:SQL 语法 第二讲:SQL SELECT 语句 第三讲:SELECT DISTINCT 语句 第四讲:SQL WHERE 子句 ...

  10. IdHTTPServer(indy10)开发REST中间件

    IdHTTPServer(indy10)开发REST中间件 浏览器通过“get”方式查询数据URL样例:http://127.0.0.1:7777/query?sql=select * from t1 ...