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 ...
随机推荐
- the user operation is waiting
eclipse在编辑完代码保存的时候,弹出一个进度框,等N长时间,标题是"user operation is waiting",里面显示的是building workspace的进 ...
- <Script>放置位置
html文件是自上而下的执行方式 css引入执行加载时,程序仍然往下执行 script脚本是则中断线程,待该script脚本执行结束之后程序才继续往下执行 页面效果实现类的js放在body之前,动作, ...
- JavaScript备忘录
提取字符串substring(start,end)substr(start [, length ])JavaScript substr() 方法 --
- c# .Net :Excel NPOI导入导出操作教程之数据库表信息数据导出到一个Excel文件并写到磁盘示例分享
string sql = @"select * from T_Excel"; ----------------DataTable Star---------------- ...
- 记一次WinForm中屏蔽空格键对按钮的作用
事件的起因是在做一个项目功能时,添加快捷键关闭声音,这个键最终选择了空格键,但是当按下空格键时,会把窗体中获取焦点的控件(比如按钮,文本框等)的单击事件触发,所以要屏蔽这个现象. 开始使用各种方法,在 ...
- DI中Transient Scoped Singleton Instance的区别
Observe which of the OperationId values varies within a request, and between requests. Transient obj ...
- 个人对RCU的理解
本文对于RCU的概念不进行解释. 考虑一种比较让人困惑的情形,就是在grace period期间,有新的读者进入,那么这个读者拿到的是新数据还是旧数据,查阅了很多资料都没找到答案,当然对于链表的情况这 ...
- 计算sql语句的查询时间
set statistics profile on set statistics io on set statistics time on go <这里写上你的语句...> go set ...
- vim的编译安装及其插件YouCompleteMe安装
相关的环境: win 7 x64 vs2013 community python 2.7.10 AMD64 python 3.5 AMD64 LLVM 3.5 cmake 3.5 YouCompl ...
- D2js 是如何处理并发的
d2js 运行于 servlet 容器,如tomcat,由于容器自身支持并发,似乎 d2js 只要使用 nashorn 运行脚本即可.这样我们得到最简单的实现方式: 在该方式中,nashorn引擎仅存 ...