amCharts JavaScript Charts

amCharts提供您最需要的JavaScript/HTML5图表。一套包括串行(列,栏,线,区,步线,平滑线,烛台,OHLC图),馅饼/甜甜圈,雷达/极性和XY /分散/气泡图。amCharts的图表提供了无与伦比的功能和性能,在一个高级的,符合标准的包里。

支持所有高级浏览器

amCharts的JavaScript图表支持所有高级浏览器(包括但不限于)现代火狐,Chrome,Safari,Opera和Internet Explorer的版本。它的iPad,iPhone,iPod Touch的IOS()和Android的蜂窝供电的移动设备上运行。该软件包还包括闪存,可以送达用户的浏览器不支持SVG / VML的图表。

超级强大的序列图

amCharts的序列图是如此强大,它应该被称为超图。它可以显示柱形图,条形图,线,区,步线,平滑线,烛台和OHLC图。它可以接受的日期/时间数据和在任何您想要的格式,并将其放置在逻辑间隔的网格线显示日期 - 月初,周,小时 - 取决于你的数据的范围。用一个单一的“旋转”属性设置为true,您的柱形图将成为一系列垂直轴绘制的条形图。图表支持多个数值轴数和反转。用户可以放大,平移图表,添加以价值和类别轴的指南。串行和XY图表支持趋势线。

滚动和缩放

串行和XY图可以放大和滚动。或序列图可以显示高级的滚动条。

  

转载于:https://my.oschina.net/u/180932/blog/41292

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
/* *author:XudongChen *Date:2010-03-09 *QQ:233828249 81023617(不才) *Email:xznd@163.com */ 2009-8-13 1.加载分块地图 2.添加全景标记窗体 2009-8-14 1.增加控制条 2.增加全景标记、公交车标记显示层 3.解决地图定位问题 4.增加经纬度层功能 5.未修正图标层的定位 2009-8-15 1.已修正8.14地图定位错误,还存在放大缩小时定位不准 2.存在ie内存泄漏问题 2009-8-16 1.已修正8.15 ie内存泄漏问题,chrome下可能还存在内存泄漏 2.增加图标定位功能 3.增加鼠标滚轮事件(http://yongzhi.blog.hexun.com/5057947_d.html) 4.通过jquery加载json数据文件(图标显示层数据) 2009-8-17 1.增加建筑物高亮显示(还需完成鼠标mouseover和mouseout事件) 2009-8-18 1.完成建筑物高亮显示,有点小bug 2009-8-19 1.增加记录原始缩放比例的全局变量 2.解决建筑物高亮显示bug 2009-8-20 1.增加三维全景展示功能 2.浏览建筑详细功能 2009-8-21 1.引入jqueryAlert插件,美化弹出窗体 2009-8-23 1.增加搜索功能 2.清理建筑信息显示页和公交信息页多余数据 2009-10-22 1.增加小沙盘拖动类(鹰眼视图) BirdEye.js 完成小沙盘到地图的同步,同步方法:检测mouseup事件触发->修改url->request->计算坐标->同步行为 2.增加小沙盘样式表BirdEye.css 地图图片路径birdeyemap 3.完成window.parent地图->小沙盘的同步 问题:小沙盘->window.parent地图存在bug,可以尝试开启 2009-10-23 1.在小沙盘中增加浮动绿色框 2009-11-6 1.实现“鹰眼地图”不需移动,一幅可以看到见全景, 当主场景移动时,“鹰眼地图”只有小框在移动。 同时“小框” 主场景也在移动。 2009-12-17 1.测距功能事件配置 2009-12-21 1.完成测距功能 2009-12-22 1.配置搜索功能,后台改用s2sh框架 2.完成hessian+spring+hibernate整合,提供建筑信息和公司信息hessian查找服务 2009-12-23 1.配置hessian服务端缓存 2.配置hessian日志记录,输出到文件/log/wzucxd/html 3.完成建筑信息显示页,配置2级缓存 4.配置oscache 5.配置新闻信息模块 2010-1-13 1.完成chrome和ff下的搜索功能 2.搜索功能支持ie6.0+ //设置Theodolite$setPoint var cpointtmp = new CPoint(this.holder.offsetLeft + evt.clientX - this.mvl.offsetLeft, this.mvl.offsetTop + evt.clientY - this.mvl.offsetTop); Theodolite$setPoint(cpointtmp);
使用AmCharts构建地图需要遵循以下步骤: 1. 引入AmCharts的库文件。可以从AmCharts官网下载或者使用CDN链接引入。 2. 创建一个div容器来承载地图。 3. 创建一个地图对象,并设置地图的属性,例如地图类型、背景色、缩放等级等。 4. 加载地图数据。可以使用AmCharts提供的地图数据或者自己的地图数据。 5. 创建图层和图像对象,将地图数据显示在地图上。可以使用AmCharts提供的图层和图像对象,也可以自定义图层和图像对象。 6. 设置图层和图像对象的属性,例如颜色、边框、标签等。 7. 绑定事件处理程序,例如鼠标单击、鼠标移动等。 8. 将地图对象添加到div容器中显示。 下面是一个简单的例子: ```javascript // 引入AmCharts库文件 <script src="https://cdn.amcharts.com/lib/4/core.js"></script> <script src="https://cdn.amcharts.com/lib/4/maps.js"></script> <script src="https://cdn.amcharts.com/lib/4/geodata/worldLow.js"></script> // 创建一个div容器 <div id="chartdiv" style="width: 100%; height: 500px;"></div> // 创建地图对象 var chart = am4core.create("chartdiv", am4maps.MapChart); // 设置地图属性 chart.projection = new am4maps.projections.Miller(); chart.background.fill = am4core.color("#F5F5F5"); chart.zoomLevel = 2; // 加载地图数据 chart.geodata = am4geodata_worldLow; // 创建图层和图像对象 var polygonSeries = chart.series.push(new am4maps.MapPolygonSeries()); var polygonTemplate = polygonSeries.mapPolygons.template; // 设置图层和图像对象属性 polygonTemplate.fill = am4core.color("#74B266"); polygonTemplate.stroke = am4core.color("#FFFFFF"); polygonTemplate.strokeWidth = 1; // 绑定事件处理程序 polygonTemplate.events.on("hit", function(ev) { console.log("Clicked on ", ev.target.dataItem.dataContext.name); }); // 将地图对象添加到div容器中显示 chart.homeZoomLevel = 2; chart.homeGeoPoint = { longitude: 0, latitude: 0 }; chart.seriesContainer.draggable = false; chart.seriesContainer.resizable = false; ``` 这个例子创建了一个包含世界地图的AmCharts地图,并且设置了地图的属性、图层和图像对象的属性,并且绑定了一个单击事件处理程序。你可以根据自己的需要调整这个例子。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值