highcharts实现饼图的代码教程
程序员文章站
2022-11-28 09:14:21
highcharts实现饼图的代码教程
//highcharts绘制饼状图
var chart = null;
$(f...
highcharts实现饼图的代码教程
//highcharts绘制饼状图 var chart = null; $(function () { $('#accountReportChart').highcharts({ chart: { plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false, }, title: { align:'left', text: '客户分类统计', style:{"fontSize":"12px","color":"#22252A","fontWeight":"bold","lineHeight":"12px","fontFamily":"PingFangSC-Medium"} }, subtitle:{ text:'客户分类' }, legend: { align: 'right', //水平方向位置, layout:'vertical', x:-20 }, tooltip: { enabled:false }, credits: { enabled: false //不显示LOGO }, plotOptions: { series:{ states:{ hover:{ enabled:false, } } }, pie: { size:'218', allowPointSelect: true, animation:false, slicedOffset:3, cursor: 'pointer', dataLabels: { enabled: false, format: '<b>{point.name}</b>**{point.percentage:.1f} %', // style: { // color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' // } }, colors:[ '#5B93D3', '#7CBDDF', '#208BC2', '#667489', '#324462', '#384250' ], showInLegend: true, point: { events: { // mouseOver: function(e) { // 鼠标滑过时动态更新标题 // // 标题更新函数,API 地址:https://api.hcharts.cn/highcharts#Chart.setTitle // chart.setSubtitle({ // text: e.target.name+ '<br>'+ e.target.y // }); // } //, click: function(e) { // 同样的可以在点击事件里处理 // console.log(e.path[3].find('highcharts-series-group')); n++; if(n=1){ $('.highcharts-root').find('.highcharts-series').attr("transform","translate(10,60) scale(1 1)") } $('.highcharts-root').find('.highcharts-series').css('transform','translate(10,45) scale(1,1)'); console.log($('.highcharts-root').find('.highcharts-series').attr("transform","translate(10,60) scale(1 1)")); chart.setSubtitle({ text: '<p style="font-size:18px;color:#22252A;line-height:18px;margin-bottom:18px;font-weight:bold;font-family: PingFangSC-Medium;">'+e.point.name+'</p><br><p style="font-size: 16px;color:#22252A;line-height:18px;font-weight:bold;font-family: PingFangSC-Medium;">'+e.point.y+'</p>' , // style: }); } } }, } }, series: [{ type: 'pie', innerSize: '65%', name: '市场份额', data:[ {name:name[0],y:value[0]}, {name:name[1],y:value[1]}, {name:name[2],y:value[2]}, {name:name[3],y:value[3]}, {name:name[4],y:value[4]}, {name:name[5],y:value[5]} ] }] }, function(c) { // 环形图圆心 console.log(2); // $('.highcharts-root').find('.highcharts-series').removeAttr("transform"); var centerY = c.series[0].center[1], titleHeight = parseInt(c.title.styles.fontSize); c.setSubtitle({ x:centerY-160, y:centerY + titleHeight/2+50 }); chart = c; }); });
若想实现效果,需要引入highcharts的js文件,以及更改option里面的data的配置,我这里是从后台获取数据的
上一篇: 这年头网站的用户价值何在:心酸的价值
下一篇: Python 函数的参数解析