`
zccst
  • 浏览: 3322570 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

amcharts的使用

阅读更多
作者:zccst

amcharts,应该跟fusionCharts和HightCharts一样,是首选。

fusionCharts目前已经基本弃用。(原因是引用了很多Flash)

其实,主要也就amcharts和HightCharts。其他的还在了解中


1,后来发现中文文档真是差劲,根本解决不了我的问题。
比如,我希望饼图填满整个正方形区域。

经查询API才知道有一个radius和minRadius的属性,解决了我的问题。所以还得是官方文档啊!

原版API地址(饼图的):
http://docs.amcharts.com/3/javascriptcharts/AmPieChart

2,还有,重新设置数据后chart.validateNow();兵没有立即生效,查询API后才发现,应该调用validateData()
两者的区别:
validateData() This method should be called after data in your data provider changed or a new array was set to dataProvider. After calling this method the chart will parse data and redraw.
validateNow() This method should be called after you changed one or more properties of any class. The chart will redraw after this method is called.
详见AmChart API:http://docs.amcharts.com/3/javascriptmaps/AmChart


3,想获取渲染之后各块的颜色值(饼图的各个组成部分)
在PHP端定义一个数组:
public $pieColors = array("#FF0F00", "#FF6600", "#FF9E01", "#FCD202", "#F8FF01", "#B0DE09", "#04D215", "#0D8ECF", "#0D52D1", "#2A0CD0", "#8A0CCF", "#CD0D74", "#754DEB", "#DDDDDD", "#999999", "#333333", "#000000", "#57032A", "#CA9726", "#990000", "#4B0C25");

并在action中传到前端 'pieColors' => $this->pieColors ;

在js端:
var pieColors = JSON.parse('<?php echo json_encode($pieColors);?>');//注意有延迟,不能直接赋值
chart.pieColors = pieColors;

在HTML中:循环每一个$index时
<?php foreach ($xxxxx as $index=>$item) {?>
<div style="width:10px;height:10px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;background:<?php echo $pieColors[$index]; ?>"></div>
<?php }?>


最终的参数:
chart = new AmCharts.AmPieChart();
chart.dataProvider = data;
chart.titleField = "name";
chart.valueField = "money";
chart.radius = 58;//minRadius最小半径,width/2,height/2中的最小值
chart.labelText = ""; //chart.labelText = "[[percents]]%";
chart.balloonText = "";//鼠标悬浮在charts时的文字
chart.pieColors = pieColors;
chart.clickSlice = function(){//取消点击事件
	return false;
}
chart.write("pieCharts");




a​m​c​h​a​r​t​s​图​表​使​用​总​结
http://wenku.baidu.com/link?url=DiECsZ1f94wkFKUmacZG44uJ4eD3OS_qYPJ6vtxGv0PQjPchXcDLVXmNCSmz1IcTLzMNloDy4sgaRC9213wuBZ5_Uly8dGIni_sfCD6xILe


如果您觉得本文的内容对您的学习有所帮助,您可以微信:
分享到:
评论

相关推荐

    amCharts使用讲解

    amCharts免费版本开发的参数及讲解

    amcharts控件

    这个例子展示了如何使用AmCharts创建一个基于JSON数据的日期-访问量柱状图,并添加了滚动条和鼠标光标功能。 总的来说,AmCharts3.21控件为开发者提供了强大的数据可视化工具,无论是基本的图表展示还是复杂的交互...

    amcharts-php-master

    下面我们将深入探讨 `amcharts-php-master` 的核心概念、使用方法以及它在实际项目中的应用。 1. **AmCharts 概述**: AmCharts 是一个强大的 JavaScript 图表库,提供丰富的图表类型,如折线图、柱状图、饼图、...

    使用amCharts制作的基于c# wpf的股票K线图源码

    在本文中,我们将深入探讨如何使用amCharts库在C# WPF环境中创建股票K线图。amCharts是一款功能强大的JavaScript图表库,同时也提供了.NET版本,方便开发者在C#项目中集成图表功能。以下是对这个主题的详细阐述: ...

    amcharts 图片导出格式解读

    1. **图表渲染**:AmCharts使用SVG或Canvas技术在浏览器中绘制图表,提供丰富的样式和动画效果。在服务器端,这些通常需要被转换成像素级别的图像。 2. **捕获视图**:`ChartImageExporter`会捕获当前图表的视觉...

    WPF中使用amCharts绘制股票K线图源码的demo

    在本文中,我们将深入探讨如何在Windows Presentation Foundation (WPF) 中使用amCharts库来创建一个股票K线图的示例。WPF是.NET Framework的一部分,用于构建具有丰富图形界面的桌面应用程序。amCharts则是一个功能...

    amcharts官方离线文档

    **AmCharts离线文档详解** AmCharts是一款强大的JavaScript图表库,它提供了丰富的图表类型和高度定制的功能,使得在Web应用...因此,对于任何使用或打算使用AmCharts的人来说,这个离线文档都是不可或缺的学习资源。

    HTML5图表amCharts教程下载

    要使用 amCharts,需要按照以下步骤进行: 第一步:下载开发包 amCharts 的开发包很小,只有 4M 多,可以到官方网址 http://www.amcharts.com 或中国代理商软件开发方案网下载。 第二步:引用 js 文件 使用 ...

    amcharts_3.17.3去除logo

    “去除logo”的部分意味着在使用该库时,用户可能希望移除默认显示的`amcharts` 标志,以便于定制自己的图表样式或者满足版权需求。这通常涉及到修改库的源代码或配置选项,以确保在生成的图表上不显示官方的品牌...

    asp.net 图表控件 amCharts

    1. **引用库文件**:从提供的压缩包中,我们看到包含"am.Charts.dll"和"am.Charts.pdb"文件,这些都是amCharts的库文件,需要在ASP.NET项目中引入这些文件,以便在C#代码中使用amCharts的相关类。 2. **创建图表**...

    amcharts 超好的用来制作flash图表工具

    6. **许可证和使用**:amcharts提供免费和商业两种版本,免费版适用于个人和非商业项目,商业版则为专业开发和商业用途提供了更多的功能和服务。 7. **版本更新**:从提供的压缩包文件名称来看,例如amcharts_...

    amcharts-3.20.20

    - **licence.txt**:许可协议,详细说明了使用amCharts的法律条款和条件。 - **amcharts**:包含amCharts的核心库文件,如`amcharts.js`,是创建图表的关键。 - **images**:存放图表相关的图像资源,如图标、背景等...

    amcharts 3D柱状图解说

    **amCharts 3D柱状图详解** amCharts是一款强大的JavaScript图表库,它提供了一系列丰富的交互式图表类型,包括2D和3D效果。在本篇文章中,我们将深入探讨amCharts如何实现3D柱状图,并通过实际案例来理解其工作...

    amcharts3D flex帮助文档

    6. **Examples**: 文件列表中的"Examples"可能包含预设的示例代码,展示了如何使用amCharts 3D库创建各种图表,对于初学者来说是极好的学习资源。 7. **Documentation**: "Documentation"文件夹可能包含详细的API...

    关于amCharts的五种免费图表使用笔记

    本笔记将详细探讨amCharts的五种免费图表的使用方法,帮助开发者更好地理解和应用这些图表。 一、折线图(Line Chart) 折线图是amCharts中最基础的图表类型之一,用于展示数据随时间变化的趋势。创建折线图的关键...

    amcharts_3.19.2.freeDEMO、源码

    在您提供的压缩包“amcharts_3.19.2.freeDEMO、源码”中,包含了一些关键文件和目录,这些对于理解和使用AmCharts 3.19.2版本的免费DEMO及其源码至关重要。 1. **index.html**:这是DEMO的主入口文件,它展示了...

    amcharts用免费key注册

    在提供的压缩包文件`amcharts_key.txt`中,可能包含了注册时获得的免费key,你需要将这个key复制到你的项目代码中,以激活amCharts的使用权限。在实际应用中,务必妥善保管key,不要将其公开,以免被他人滥用。 ...

    Amcharts flash版

    2. `licence.txt`:这是关于AmCharts许可协议的文件,详细规定了用户可以如何使用、分发和修改AmCharts代码。阅读并遵守许可证条款是使用开源软件的重要步骤。 3. `thirdPartySoftwareList.txt`:列出AmCharts Flash...

    amCharts开发实例

    4. 渲染图表:在JavaScript中,使用amCharts的`AmCharts.makeChart()`方法生成图表,并传入配置对象和数据源。 5. 交互功能:通过amCharts的API,你可以实现图表的交互功能,如点击事件、数据更新等。 三、...

    js版本的amcharts

    使用AmCharts,开发者可以通过简单的JSON配置来定义图表的样式和行为。此外,AmCharts还提供了丰富的API和事件处理机制,使得自定义图表功能变得更加灵活,可以满足各种复杂需求。 3. **数据源支持**: AmCharts...

Global site tag (gtag.js) - Google Analytics