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. linux文件目录结构

    1./ 文件系统的入口,最高一级目录 2./bin 存放基础系统所需的命令 3./boot 包含Linux内核及系统引导程序所需要的文件 4./dev 设备文件存储目录(声卡.磁盘.分区..) 5./ ...

  2. PHP进程通信基础——信号量+共享内存通信

    PHP进程通信基础--信号量+共享内存通信 由于进程之间谁先执行并不确定,这取决于内核的进程调度算法,其中比较复杂.由此有可能多进程在相同的时间内同时访问共享内存,从而造成不可预料的错误.信号量这个名 ...

  3. MQTT开发笔记之《安全传输-自问自答》

    Mosquito使用SSL/TLS进行安全通信时的使用方法:http://www.it165.net/pro/html/201404/12615.htmljava版mosquitto客户端使用SSL功 ...

  4. .net Socket 通信简单实例(初级入门)

    c/s控制台应用程序,Server.Client分别在两个项目中 服务端 using System; using System.Collections.Generic; using System.Li ...

  5. coreseek增量索引合并

    重建主索引和增量索引: [plain] view plain copy /usr/local/coreseek/bin/indexer--config /usr/local/coreseek/etc/ ...

  6. ADO.NET--收藏整理别人的教程

    本文所有内容均从前辈的博客中收集整理而来,仅供自己学习参考的时候快速访问用. ADO.NET入门教程(一) 初识ADO.NET ADO.NET入门教程(二)了解.NET数据提供程序 ADO.NET入门 ...

  7. Java/C++之 public、protected、private ; virtual & abstract

    一.绪 Java/C++都是面向对象的第三代计算机高级编程语言,其本质雷同,而语法确有差异,稍不注意容易引起混淆.本文总结了一些这两门语言的差异之处,仅供参考. 二.C++ 对于C++这门语言,就其类 ...

  8. RabbitMQ学习系列(五): RPC 远程过程调用

    前面讲过一些RabbitMQ的安装和用法,也说了说RabbitMQ在一般的业务场景下如何使用.不知道的可以看我前面的博客,http://www.cnblogs.com/zhangweizhong/ca ...

  9. .gitignore过滤个人配置

    git还是一个很好使用的版本工具.所以用eclipse做自己的小玩意儿,在多台电脑之间同步的时候我经常会使用它.. 但是有个问题..不同电脑的eclipse的个人配置稍微有那么一点点的不同..比如有几 ...

  10. CDDA 源码解析

    一.编译1:从 https://github.com/CleverRaven/Cataclysm-DDA 下载源码2:下载IDE CodeBlocks,http://pan.baidu.com/s/1 ...