Amcharts曲线图，简单明了，看完立马就上手

结果图如下：

代码展示：

1、头部引入amcharts.js 文件

<script src="./amcharts.js"></script>

2、设置图表展示区域

<div id=" chlintdiv" style="width:450px; float:left; height:350px; "></div>

3、JS逻辑

        var chlintData = [];var tmpData = "20111,31.81|20112,30.54|20113,26.1|20114,27.92|20115,20.58|20116,19.14|";var tmp = tmpData.split('|');var tmpKeyValue = {};for (let i = 0; i < tmp.length; i++) {if (tmp[i] != '') {var tmpSection = tmp[i].split(',');tmpKeyValue["date"] = new Date(tmpSection[0].substr(0, 4), tmpSection[0].substr(4));tmpKeyValue["price"] = tmpSection[1];chlintData.push(tmpKeyValue);tmpKeyValue = {};}}var chlint;AmCharts.ready(function() {// SERIAL CHARTchlint = new AmCharts.AmSerialChart();chlint.dataProvider = chlintData;chlint.categoryField = "date";// X轴时间var categoryAxis = chlint.categoryAxis;categoryAxis.parseDates = true;categoryAxis.fillAlpha = 1;categoryAxis.fillColor = "#FAFAFA";categoryAxis.gridAlpha = 0;categoryAxis.minPeriod = "DD";categoryAxis.dashLength = 1;categoryAxis.gridAlpha = 0.15;var chlintAxis = new AmCharts.ValueAxis();chlintAxis.gridAlpha = 0.05;chlintAxis.axisAlpha = 1;chlint.addValueAxis(chlintAxis);// 曲线var chlintGraph = new AmCharts.AmGraph();chlintGraph.title = "毫秒";chlintGraph.valueField = "price";chlintGraph.type = "smoothedLine";chlintGraph.valueAxis = chlintAxis;chlintGraph.lineColor = "#3f76b7";chlintGraph.balloonText = "[[value]]";chlintGraph.lineThickness = 2;chlintGraph.bullet = "round";chlintGraph.bulletColor = "#3f76b7";chlintGraph.bulletBorderColor = "#3f76b7";chlint.addGraph(chlintGraph);// 图例var chlintLegend = new AmCharts.AmLegend();chlintLegend.bulletType = "round";chlintLegend.equalWidths = false;chlintLegend.valueWidth = 50;chlintLegend.color = "#000000";chlint.addLegend(chlintLegend);// WRITEchlint.write(" chlintdiv")});

附加上插件的下载地址：
https://www.amcharts.com/download/download-v3/

Amcharts曲线图，简单明了，看完立马就上手相关推荐

iOS和android运存机制,为什么苹果4GB运存却比安卓8GB更丝滑流畅？看完立马涨知识了...
众所周知,目前智能手机分为苹果和安卓两大阵营.如今不管是苹果手机还是安卓手机在性能方面都越来越强大,为了进一步提升用户体验,安卓主流旗舰标配已达到了8G运存,顶配甚至达到了12G,最低也是4G起步,反 ...
新手入门手把手教你自学吉他，简单易懂看完就会
0基础初学者和新手小白入门自学吉他,很简单看完就会. 记得之前的文章中好像说过,关于吉他的结构和各项功能自己买本书或者查资料很容易就能找到,思来想去还是想写一篇关于吉他0基础新手入门的内容,正好自己也 ...
wireshark网络分析就这么简单 pdf_用了这么久才发现！原来PDF提取文字这么简单，看完涨知识了...
如何将PDF中的文字提取出来,这对很多上班族朋友来说是经常遇到的事情.想要快点结束工作的话,下面这个提取PDF文字内容的方法一定要学会. 一.Word提取方法 1.使用Word打开首先我们可以使用W ...
微信支付、支付宝最全接入指引，看完立刻就可以上手！
每天早上七点三十,准时推送干货 Photo by XPS on Unsplash Hello,大家好,我是阿粉~ 前段时间阿粉在公司接手了一个支付项目,这个项目接入了微信.支付宝.这个项目开发下来,阿 ...
整理的一些 Vue3 知识点，初学者看完就能上手做项目
点击上方关注前端技术江湖,一起学习,天天进步看完你就基本可以上手搞开发了,本文适合Vue初学者,或者Vue2迁移者,当然还是建议Vue3官网完全过一遍.不适合精通原理,源码的大佬们. 先推荐两个v ...
华为手机怎么看图片属性_华为手机怎么才能息屏显示时间？操作方法很简单，看完涨知识了...
现如今大家几乎都是手机不离身,甚至有些朋友机不离手.所以已经比较少人,会因为看时间而佩戴手表了,毕竟只要按下电源键就可以看时间了.其实现在的很多手机,不用亮屏也能看时间,下面我们就一起来看看是如何设置 ...
手机怎么用外嵌字幕_今天才知道，手机拍视频还能添加字幕，方法太简单，看完就能学会...
很多人平时都喜欢拍视频,那么你们知道用手机拍摄视频,怎么给视频添加字幕吗?我想很多人都不知道吧,其实方法很简单,下面小编就来教大家,一起来看看吧. 方法一:微信 (1)看到微信,大家是不是还纳闷,微信 ...
python c java_简单明了看懂JAVA，Python和C＋的优劣势
Java由于其优越的跨平台可移植性,在Web开发中是主流语言.在加上手机Android系统的发展,使得java开发人员的需求量很大.同时,Java现在也用来开发手游.Java 的语法相对规范. Pyt ...
合并PDF文件什么方法很简单？看完你就明白了
想要将几个PDF文件合并到一起,什么方法使用起来是很简单的呢?PDF文件作为大家经常使用的文件之一,对它的编辑需求也很多,除了需要编辑文件的内容之外,还有需要将几个文件合并到一起使用的需求.那么我们如 ...
Vue2简单使用及相关基础知识概念（适合小白入门，看完就能上手）
Vue2相关知识一.概念 1.前端模式 2.MVVM模式 2.1 概念 2.2 优点 (1)低耦合 (2)可复用 (3)独立开发 (4)可测试 3.Vue 3.1 概念 3.2 优点 3.3 参考网 ...

Amcharts曲线图，简单明了，看完立马就上手

Amcharts曲线图，简单明了，看完立马就上手相关推荐

最新文章

热门文章