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 饼图区别!的更多相关文章

  1. highCharts 饼图动态加载

    饼图的动态加载 (1):导入样式 <script type="text/javascript" src="<%=request.getContextPath( ...

  2. Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,demo如下: $(function () { $('#container').highcharts({ chart: { plotBackgroundCo ...

  3. FusionCharts多数据验证饼图label是否重叠

    昨天,有人问我一个问题:由于饼图的数据太多,label标签上的汉字过多,导致重叠,该怎么解决? 今天我用大量的数据,label标签的字符也很多,但是通过验证没有发现有重叠的情况啊! 1.验证的JSP页 ...

  4. HighCharts 饼图

    @{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } @section ...

  5. highcharts 饼图显示数据比例如何保留二位小数

    var NewPerCent=parseFloat(NewPerCent.toString()).toFixed(2);return '<b>'+ this.point.name +'&l ...

  6. FusionCharts参数说明-----3D饼图属性(Pie3D.swf )

    animation 是否显示加载图表时的动画 palette 内置的图表样式,共5个 paletteColors 自定义图表元素颜色(为多个,如过过少会重复) showAboutMenuItem 右键 ...

  7. FusionCharts 3D环饼图

    1.设计静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"& ...

  8. FusionCharts 2D环饼图

    1.静态页面 Doughnut.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> ...

  9. fusioncharts的3D饼图固定大小和角度

    3D饼图的pieRadius和startingAngle属性 pieRadius:饼图的半径 startingAngle:饼图的角度(旋转) 在固定大小的div里面,饼图上如果显示label或者val ...

随机推荐

  1. java第二周周学习总结

    java运算符和循环 java运算符 一.for 语句 for 语句的基本结构如下所示:for(初始化表达式;判断表达式;递增(递减)表达式){    执行语句;   //一段代码} 初始化表达式:初 ...

  2. ffmpeg视频截图命令

    ffmpeg.exe -i xxx.mp4 -y -f image2 -t 2 -s 64*320 xxx.jpg

  3. linux下配置yun源

    备份原yum源   /etc/yum.repos.d/centos一base.repo 下载yum源       wagt 源网址/源名称/etc/yum.repos.d/原yum名

  4. python学习笔记(二)

    (一)模块打包     --->        注:suba和subb文件夹下的__init__.py文件,即使为空,也必须存在 "setup.py" from distut ...

  5. Android View 的事件体系

    android 系统虽然提供了很多基本的控件,如Button.TextView等,但是很多时候系统提供的view不能满足我们的需求,此时就需要我们根据自己的需求进行自定义控件.这些控件都是继承自Vie ...

  6. maven报brors occurred during the build

    原因分析: 此问题一般发生在eclipse保存文件并自动部署时候.本人在写项目的时候,还没等部署好,关闭了了eclipse,结果出现了这种情况.有一种产生此错误的原因是因为此项目不不是由eclipse ...

  7. MySQL查看已安装的编译参数

    MySQL5.1.x版本 cat $path/bin/mysqlbug|grep configure MySQL5.5.x

  8. web中c#纯网站中引用log4net模块,不记录日志

    如题,解决如下: 1.log4net.config配置如下: <?xml version="1.0" encoding="utf-8" ?> < ...

  9. Standard C 语言标准函数库介绍

    全面巩固所知所学,往精通方向迈进! Standard C 语言标准函数库速查 (Cheat Sheet) from:http://ganquan.info/standard-c/function/ C ...

  10. ps命令

    Linux中的ps命令是Process Status的缩写.ps命令用来列出系统中当前运行的那些进程.ps命令列出的是当前那些进程的快照,就是执行ps命令的那个时刻的那些进程,如果想要动态的显示进程信 ...