FusionCharts和highcharts 饼图区别!
FusionCharts
---------------脚本---------------
<script src="../../../fashioncharts/js/FusionCharts.js" type="text/javascript"></script>
---------html----------
<div id="container"> </div>
-----------------------js-----------------------
$.ajax({
url: BasinList.url
, async: true
, dataType: "json"
, data: {
Method: "GetChartsData",
datatype: BasinList.datatype,
starttime: BasinList.starttime,
endtime: BasinList.endtime,
selType: BasinList.selType,
seltypeBR: BasinList.seltypeBR,
CategoryList1: BasinList.CategoryList1,
dbRadioVal: BasinList.dbRadioVal,
DBStarTime: BasinList.DBStarTime,
DBEndTime: BasinList.DBEndTime,
charttype: type
}
}).done(function (data) { // var list1 = data;
$.messager.progress('close');
//属性http://blog.sina.com.cn/s/blog_5384392701011srl.html
var dataxml = '<chart caption="" legendborderalpha="0" startingangle="45" slicingdistance="20"'; //slicingdistance:点击pie时 移动距离
dataxml += 'basefontColor="000000" showlegend="1" chartLeftMargin="0" chartTopMargin="0" chartBottomMargin="1" baseFontSize="15"';
dataxml += 'legendBgAlpha="0" bgAlpha="0" bgSWFAlpha="0"';
dataxml += 'toolTipBorderColor="#9BD7F5" showpercentvalues="1" showpercentintooltip="0" plottooltext="$value: $label"'//提示框样式与格式设置
dataxml += 'palettecolors="#8DEE93,#0098d9,#E42B6D,#05AD06">'; //指定各个pie区颜色
$.each(data, function (i, item) {
dataxml += '<set label="' + item.name + '" value="' + item.y + '" />';
});
dataxml += '</chart>';
var myChart = new FusionCharts("../../..//fashioncharts/swf/Pie3D.swf", "myChart", "100%", "60%", "", "");
myChart.setDataXML(dataxml);
myChart.render("container");
});
效果图片----------------------

------------------------highcharts------------
------------------js---------------
<script type="text/javascript" src="../../../Highstock/js/highstock.js"></script>
<script type="text/javascript" src="../../../Highstock/js/highcharts-3d.js"></script>
===========================================================================
$('#container').highcharts({
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: ,
beta:
}
},
credits: {
enabled: false //是否显示highcharts.com标识
},
loading: {//正在加载提示
style: {
backgroundColor: 'silver'
},
labelStyle: {
color: 'white'
}
},
title: {
text: ''
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
depth: , //3D pie
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
},
showInLegend: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -,
y: ,
floating: true,
borderWidth: ,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true,
itemStyle: {
"fontSize": "12px",
"fontWeight": "bold",
"font-family": "微软雅黑"
}
},
series: [{
type: 'pie',
name: '全市比例',
data: list1
}]
});
效果图

看个人喜欢吧!FusionCharts 加载慢一点,falsh原因吧!
转载:http://www.cnblogs.com/blue123/p/6236240.html
FusionCharts和highcharts 饼图区别!的更多相关文章
- highCharts 饼图动态加载
饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...
- Highcharts 饼图 文字颜色设置
设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...
- FusionCharts多数据验证饼图label是否重叠
昨天,有人问我一个问题:由于饼图的数据太多,label标签上的汉字过多,导致重叠,该怎么解决? 今天我用大量的数据,label标签的字符也很多,但是通过验证没有发现有重叠的情况啊! 1.验证的JSP页 ...
- HighCharts 饼图
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section ...
- highcharts 饼图显示数据比例如何保留二位小数
var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...
- FusionCharts参数说明-----3D饼图属性(Pie3D.swf )
animation 是否显示加载图表时的动画 palette 内置的图表样式,共5个 paletteColors 自定义图表元素颜色(为多个,如过过少会重复) showAboutMenuItem 右键 ...
- FusionCharts 3D环饼图
1.设计静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...
- FusionCharts 2D环饼图
1.静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...
- fusioncharts的3D饼图固定大小和角度
3D饼图的pieRadius和startingAngle属性 pieRadius:饼图的半径 startingAngle:饼图的角度(旋转) 在固定大小的div里面,饼图上如果显示label或者val ...
随机推荐
- mac搭建测试服务器
代码可以参考: https://github.com/BigShow1949/MyServe 这里也有jar包 一.下载一个jar包 点击链接下载服务器端[moco服务端] https://repo ...
- Leetcode 15. 3Sum
Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...
- ASE周会记录
本周Sprint Master Atma Hou 一. 本周会议概要 本次会议的主要任务是明确和老师讨论后的数据库设计定稿,同时为我们接下来的连接工作确定包含实现细节的story和接口. 二. 会议内 ...
- linux系统硬件配置查看方法
一:查看cpu more /proc/cpuinfo | grep "model name" grep "model name" /proc/cpuinfo 如 ...
- Linux可信计算机制模块详细分析之核心文件分析(8)tpm.c核心代码注释(中)
/*设置TPM命令格式*/ ssize_t tpm_getcap(struct device *dev, __be32 subcap_id, cap_t *cap, const char *desc) ...
- SQL语句/函数汇总
1.CHARINDEX(短字符A,长字符B) 说明:返回A在B的位置,从1开始,若B中不存在A,则为0 例如: SELECT CHARINDEX('aaaa','abaaaacded') ----- ...
- Mac安装mysql
### 第一步 安装后一定要记住初始密码 ### 第二步 打开终端 cd /usr/local/mysql/bin ./mysql -u root -p #输入初始密码 set password = ...
- nodejs URL解析
说到URL就需要提一下URI,一个网址就是一个URL,是一个具体的符号,说明了要通过什么协议来访问某种资源,URI是一个字符格式规范,URL是URI的一个子集,URL肯定是URI,但URI却不一定是U ...
- MyEclipse10--的使用经验
MyEclipse10--的使用经验总结 ------------------ 1.MyEclipse中的验证validation----->>用MyEclipse做ExtJs项目研发的时 ...
- JVM:查看java内存情况命令
jmap (linux下特有,也是很常用的一个命令) 观察运行中的jvm物理内存的占用情况. 参数如下: -heap :打印jvm heap的情况 -histo: 打印jvm heap的直方图.其输出 ...