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. 在mysql 查询语句中将时间戳格式转化为年月日格式

    SELECT  FROM_UNIXTIME('时间戳的字段名称', '%Y-%m-%d %H:%i:%s')   FROM `表名` http://www.cnblogs.com/tdalcn/arc ...

  2. c# treeview 基本知识

    private void Form1_Load(object sender, EventArgs e) { BindTreeView(); treeView1.Focus(); treeView1.G ...

  3. bzoj 1070 [SCOI2007]修车

    最小费用最大流. 将每个技术人员拆成车数个点,技术人员i的第j个点代表技术人员i修的倒数第j辆车. 源点向所有技术人员点连一条容量为1费用为0的边. 所有技术人员点向所有车点连边:技术人员i的第j个点 ...

  4. 《黑客反汇编揭秘》(2e)推荐书单

    Must-Read Books and Other References Books on C/C++: The C Programming Language by Brian W. Kernigha ...

  5. 数据降维技术(1)—PCA的数据原理

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  6. .Net 高效开发之不可错过的实用工具

    Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...

  7. Html中的文本框和单选按钮

    Html中的文本框和单选按钮用来制作页面的登录注册使用.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN& ...

  8. windows 下的sleep 命令

    方法一 ping -n 3 127.0.0.1 > nul 其中3是需要sleep的秒数 方法二 timeout /t 3 /nobreak > nul 其中3是需要sleep的秒数

  9. [Java] Maven 镜像仓库

    配置 修改maven根目录下的conf文件夹中的setting.xml文件. 阿里云 <mirrors> <mirror> <id>alimaven</id& ...

  10. 阿里云推送SDK在某些机型(某米为主)下崩溃问题的解决方法

    引言 最近APP上线,遇到一个比较诡异的问题.最后竟然和dex文件有关,也是醉了,看来还得深入底层学习啊. 问题描述 在集成阿里推送SDK时,需要在Application中进行初始化,大多数Andro ...