amchart折线图示例
2019独角兽企业重金招聘Python工程师标准>>> 
使用amchart折现图准备工作2步：
1.需要引用封装好的amcharts.js文件和css样式表；
2.在页面上创建一个div容器存放折线图；
注意：
在页面的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应该放在最前面。
amchart折线图代码如下：
<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 type="text/javascript">var chartData = []; //定义一个数组存储折线图上的点数据generateChartData(); //调用自定义方法获取要显示在统计图中的初始数据//创建图表var chart = AmCharts.makeChart("chartdiv", { //“chartdiv”页面中放置折线图的div容器type: "serial", //折线图属于柱状图的一种，所以使用serialpathToImages: "../amcharts/images/", //指定chart图片的引用地址dataProvider: chartData, //指定数据来源，一般是一个数据对象categoryField: "date", //指定X轴由哪个字段决定//图表线（相当于X轴）categoryAxis: {parseDates: true, //是否以日期为x轴的值,true代表是gridAlpha: 0.15, //网格的透明度，介于0-1之间，0全透明，垂直于X轴的刻度线形成网格minorGridEnabled: true, axisColor: "#DADADA" //轴的颜色},valueAxes: [{axisAlpha: 0.2,id: "v1"}],//折线图graphs: [{title: "red line", //轴的名称id: "g1",valueAxis: "v1", valueField: "visits", //valueField纵轴bullet: "round", //节点类型bulletBorderColor: "#FFFFFF", //节点的边框颜色bulletBorderAlpha: 1, //节点边框透明度lineThickness: 2, //折线厚度lineColor: "#b5030d", //折线颜色negativeLineColor: "#0352b5",balloonText: "[[category]]<br><b><span style='font-size:14px;'>value: [[value]]</span></b>"}],//光标chartCursor: {cursorPosition: "mouse" //光标的位置},//滚动条chartScrollbar: {scrollbarHeight: 40, //滚动条高度color: "#FFFFFF",autoGridCount: true, //自动调整坐标格子数，false值时展示的值不能自己调整可能会出现序列化后的数据展示界面拥挤graph: "g1"}});chart.addListener("dataUpdated", zoomChart);//生成随机日期数据和随机的范围（如果是后台传过来实际数据则直接处理数据不用模拟这些数据）function generateChartData() {var firstDate = new Date();firstDate.setDate(firstDate.getDate() - 500);for (var i = 0; i < 500; i++) { var newDate = new Date(firstDate);newDate.setDate(newDate.getDate() + i);var visits = Math.round(Math.random() * 40) - 20;chartData.push({date: newDate,visits: visits});}}//当折线图初始化时触发zoomChart()方法function zoomChart() {//多种zoom方法可以使用， zoomToIndexes, zoomToDates, zoomToCategoryValues，这里使用zoomToIndexeschart.zoomToIndexes(chartData.length - 40, chartData.length - 1);}//修改条件pan模式和select模式function setPanSelect() {var chartCursor = chart.chartCursor;if (document.getElementById("rb1").checked) {chartCursor.pan = false;chartCursor.zoomable = true;} else {chartCursor.pan = true;}chart.validateNow();} </script></head><body><div id="chartdiv" style="width: 100%; height: 400px;"></div><div style="margin-left:35px;"><input type="radio" checked="true" name="group" id="rb1" onclick="setPanSelect()">Select<input type="radio" name="group" id="rb2" onclick="setPanSelect()">Pan</div> </body></html>转载于:https://my.oschina.net/u/3544533/blog/1608629
amchart折线图示例相关推荐
- echarts折线图——示例
option = {backgroundColor: '#fff', // 背景颜色title: { //标题text: '折线图示例', //主subtext: '', // 副 textStyle ...
- 图文列表+富文本解析+折线图示例小程序模板
简介: 一款多功能示例模板,带图文列表.富文本.折线图.会员中心模块,分享给大家学习. 网盘下载地址: http://kekewl.cc/NiqnJXnde6s0 图片:
- Python画折线图示例代码
Python画图 双折线图代码示例 import matplotlib.pyplot as plt import pandas as pd data = pd.read_excel(r'1.xlsx' ...
- python绘制折线图示例
绘制结果: python代码: import numpy as np import pylab as plx = [1, 2, 3, 4, 5] # Make an array of x values ...
- python 画折线图_Python让你的数据生成可视化图形
ID:pk哥 公众号:Python知识圈 最近的技术分享被老板说了,分享内容不错,可是这些统计图差了点.作为一个做技术的,这是不能忍受的.因为 Python 除了不会生孩子,其他的都会. 直接进入今天 ...
- 折线图_Pyecharts数据可视化分析—折线图
1. 实验介绍 本实验主要介绍折线图理论与基于Python的折线图实现. 1.1. 实验目的 掌握折线图基本使用场景,使用Python的pyecharts模块实现折线图. 1.2. 知识点 折线图理论 ...
- echarts 画3D折线图错误
错误如下 Component series.scatter3D not exists. Load it first 错误原因 这个是缺少echarts-gl,引入就可以了 引入可能出现错误,解决见另一 ...
- chart.js使用学习——折线图（1：基本用法)
折线图,即在直角坐标系中用直线串起来的一系列点形成的图形.在excel.ppt等办公软件中经常见到折线图,应用系统中也有不少统计汇总功能以折线图形式展示.本文根据参考文献1-2学习chart.js ...
- python数据可视化之简单绘制简单折线图
python数据可视化之简单绘制简单折线图 1. 首先安装matplotlib liunx安装命令: $ sudo apt-get install python3-matplotlib windows ...
最新文章
- 我在大厂上班月薪7千，我晒大厂生活月入3万
- 洛谷P1730最小密度路径
- selinux-添加
- 单机、集群与分布式的概念(转)
- MyBatis设计模式总结
- 【渝粤教育】国家开放大学2018年秋季 1007t公司财务 参考试题
- esp32 coredump分析
- 线性表：顺序栈算法实现
- 关于封装 c# 115691143
- Linux(CentOS 6.5)下配置Mono和Jexus并且部署ASP.NET MVC5
- linux awk 时间范围,如何用awk从日志文件中找到时间范围的记录
- [转载] 七龙珠第一部——第050话 海盗的陷阱
- 线性/非线性规划问题求解
- 无线电发射器 Android,简单无线电app
- 瑞幸在前 Manner在后 资本吹不熟的咖啡赛道迎来新变局
- 2020年度全球人工智能十大事件
- 算法高级（21）-如何通过IP地址进行定位？
- python 天勤 金叉 编程代码_基于tqsdk（天勤）编译的均线交叉与通道突破相结合的交易系统...
- 设置图例legend分行显示
- “冰箱强行播广告关不了”上热搜，网友：买了块广告牌回家