Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法
一.提示标签重叠解决方法:
series: [{
startAngle:90,//添加这个属性,就可以解决
type: 'pie',
name: '充值方式'
}]
不知道为什么,上述方法不行了。第一次试还可以,很无语。。。。。。
二,数据绑定
数据集:

拼成json:
public string GetRechargeTypeList()
{
var dt = dal.GetRechargeTypeList();
string json = "[";
foreach (DataRow dr in dt.Rows)
{
if (dr["RechargeType"].ToString().Equals(""))
{
json += "['其他'," + dr["TotalMoney"] + "],";
}
else if (dr["RechargeType"].ToString().Equals(""))
{
json += "['定点人工'," + dr["TotalMoney"] + "],";
}
else if (dr["RechargeType"].ToString().Equals(""))
{
json += "['银联自助'," + dr["TotalMoney"] + "]";
}
}
return json + "]";
}
生成饼图:
function CreateCharts() {
var options = {
colors: ['#46cbee', '#fec157', '#e57244', '#cfd17d', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'], //不同组数据的显示背景色,循环引用
chart: {
renderTo: 'RechargeCharts',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '卡片充值渠道分析'
},
tooltip: {
pointFormat: '充值总额¥{point.y}'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
startAngle:90,
type: 'pie',
name: '充值方式'
}]
};
$.post('RechargeRecord.aspx?LoadAjaxData=GetRechargeTypeList&id=' + Math.random(), function (data) {
options.series[0].data = eval(data);
$('#RechargeCharts').highcharts(options);
}, 'text');
Highcharts Pie 饼图提示标签IE下重叠解决方法,及json数据绑定方法的更多相关文章
- 详解Android ActionBar之二:ActionBar添加Tabs标签和下拉导航
本节主要讲解ActionBar如何添加Tabs标签和下拉导航. 一.添加标签 Tabs 在ActionBar中实现标签页可以实现android.app.ActionBar.TabListener ,重 ...
- 网页图表Highcharts实践教程之标签组与载入动画
网页图表Highcharts实践教程之标签组与载入动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但很多时候,我们需要额外说明一些信息.这个时候借助原有的图表元素的标签功能就不是 ...
- Highcharts 3D柱形图;Highcharts 堆叠3D柱形图;Highcharts 3D饼图;Highcharts 3D圆环图
Highcharts 3D柱形图 配置 chart.options3d 配置 以下列出了 3D 图的基本配置,设置 chart 的 type 属性为 column,options3d 选项可设置三维效 ...
- 网页图表Highcharts实践教程之标签组与加载动画
网页图表Highcharts实践教程之标签组与加载动画 Highcharts标签组 在图表的大部分元素都提供了标签功能.但非常多时候,我们须要额外说明一些信息.这个时候借助原有的图表元素的标签功能就 ...
- selenium处理select标签的下拉框
有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select ...
- 关于eclipse使用thymeleaf时,提示标签不显示及后续问题的解方法
因为thymeleaf 使用快捷键提示,不提示标签信息. 在使用网上说的的install new software安装插件的时候 报错: Unable to read repository at ht ...
- jquery如何实现点击LI标签和下面的LI互换顺序? 超简单代码
转: jquery如何实现点击LI标签和下面的LI互换顺序? 上面的效果涉及jquery的两个方法: next() : 获得匹配元素集合中每个元素紧邻的下一个同胞元素. after() :在被选元 ...
- 解决a标签IE下点击后出现轮廓框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- a标签去掉下划线
转载自:http://jingyan.baidu.com/article/a17d52853095838099c8f24e.html <a>是默认有下划线的.所以有时候为了美观,我们需要去 ...
随机推荐
- String filePath = request.getSession().getServletContext().getRealPath("/");这句话返回的路径是什么,解释下getRealPath("/")函数中的"/"表示什么意思
request.getSession().getServletContext() 获取的是Servlet容器对象,相当于tomcat容器了.getRealPath("/") 获取实 ...
- c#常用的一些命名空间
using System.Collections; 有ArrayList;Hashtable;Stack;Queue;DictionaryEntry;等集合 using System.Data; 访问 ...
- html5 video.js 使用及兼容所有浏览器
废话少说,直接开始 一.准备材料 video.js下载: http://www.videojs.com/ 二.代码 引入相关文件:(必须放在文件的开头,也是说一定要放在video标签之前) 贴入htm ...
- java web-----DAO设计模式(数据库访问)
一,DAO设计模式用于 j2ee 的数据层访问,包括五部分, 数据库连接类(包含数据库的连接与关闭操作的一个类), VO类(私有变量与数据库表格对应,接收数据库中表格各字段内容), DAO接口类(包含 ...
- 第3章 Struts2框架--1、Struts2环境搭建
第3章 Struts2框架--1.Struts2环境搭建 搭建步骤: 1.从下载http://struts.apache.org 没找到Struts2.3.16版,就下载了2.3.29 2.拷贝后解压 ...
- ASP.NET数据绑定控件
数据绑定控件简介 数据绑定分为:数据源 和 数据绑定控件 两部分,数据绑定控件通过数据源来获得数据,通过数据源来隔离数据提供者和数据使用者,数据源有:SqlDataSource,AccessDataS ...
- ASP.NET中的特殊路径标识"~"
/ 表示网站根目录(从域名开始), ../ 表示上级目录, ./表示当前目录- 是ASP.NET定义的特殊符号,是ASP.NET内部进行定义推荐的用法,-代表从应用根目录开始定义应用根目录与网站根目录 ...
- java中移位运算符:<<、>>和>>>之间的比较
一.说明 <<:运算符将二进制位进行左移操作 >>:运算符将二进制位进行右移操作 >>>:运算符将用0填空高位 二.举例 /** * *----------c ...
- web api 跨域请求,ajax跨域调用webapi
1.跨域问题仅仅发生在Javascript发起AJAX调用,或者Silverlight发起服务调用时,其根本原因是因为浏览器对于这两种请求,所给予的权限是较低的,通常只允许调用本域中的资源,除非目标服 ...
- jquery 之事件 多库共存(noConflict)
/*jquery 之 简单事件jquery 与其它库共存,提供了 .noConflict() 方法,用法如下<script src="jquery 库"><scr ...