php外包、微信开发、app开发尽在蓝普!PHP技术服务商

饼状图代码写法

首页要引入highcharts.js
然后编入代码即可
var chart = null;
$(function () {

var ws = window.innerWidth/2.1;

var ts = window.innerHeight/145;

var zhuzhai = ;
var yanglaodichan = ;

var bieshu = ;
var shangpu = ;
var lvyoudichan = ;

$(‘#containerd’).css({“top”:ts+”rem”,”left”:”2.35rem”});
$(‘#containerd’).highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
spacing : [100, 0 , 40, 0],
type: ‘pie’
},
title: {
floating:true,
style:”display:none”,
text: ‘圆心显示的标题’
},
Subtitle: {
style:”display:none”
},
tooltip: {
pointFormat: ‘{series.name}: {point.percentage:.1f}%
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: ‘pointer’,
innerSize: ‘0’,//饼状图的内径大小
size:ws,//饼状图的大小
center : [ ‘50%’, ‘-25%’ ],
dataLabels: {
distance:-35,//数据标签距离饼图边缘的距离,为负数就越靠近饼图圆心
enabled: true,
format: ‘{point.name}: {point.percentage:.2f} %’,
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || ‘rgb(255,255,255)’,
}
},
point: {
events: {
mouseOver: function(e) { // 鼠标滑过时动态更新标题
// 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle
chart.setTitle({
text: e.target.name+ ‘\t’+ e.target.y + ‘ %’
});
}
//,
// click: function(e) { // 同样的可以在点击事件里处理
// chart.setTitle({
// text: e.point.name+ ‘\t’+ e.point.y + ‘ %’
// });
// }
}
},
}
},
series: [{

name: ‘项目占比’,
data: [

[‘住宅’, parseFloat(zhuzhai)],
[‘养老地产’, parseFloat(yanglaodichan)],
[‘别墅’, parseFloat(bieshu)],
[‘商铺’, parseFloat(shangpu)],
[‘旅游地产’, parseFloat(lvyoudichan)],

]
}]
}, function(c) {
// 环形图圆心
var centerY = c.series[0].center[1],
titleHeight = parseInt(c.title.styles.fontSize);
c.setTitle({
y:centerY + titleHeight/2
});
chart = c;
});
});

该日志未加标签。

转载请注明来源蓝普网络并以链接形式标明本文地址
本文链接: http://www.wbphp.cn/html/y01/14537.html

作者:李, 志斌 | 日期:2018-01-05 | 分类:新闻中心 | 评论:0 条 | 浏览:3


上一篇:
下一篇:

相关文章

发表评论

*

* 以便邮件回复


给我汇款 | 合作流程 | 看看我们 | 加入我们 Copyright 2008-2016 php外包与洛阳php培训服务商. Some Rights Reserved. 豫ICP备12025288号-1