php金字塔字体居中,漏斗图设置成倒金字塔及文字居中 | JShare

漏斗图设置成倒金字塔及文字居中 | JShare

$(function () {

$('#container').highcharts({

chart: {

type: 'funnel',

marginRight: 100,

events: {

load: function() {//文字居中

var chart = this;

Highcharts.each(chart.series[0].data, function(p, i) {

var newx = chart.plotWidth-p.dataLabel.translateX;

var oldx = p.dataLabel.translateX;

var bw = $(p.dataLabel.div).find('b').width();

var iw = $(p.dataLabel.div).find('i').width();

$(p.dataLabel.div).find('b').css("marginRight",oldx-newx-bw-iw-36);

p.dataLabel.attr({

x: newx+10,

'text-anchor': 'middle'

});

});

},

redraw: function() {

var chart = this;

Highcharts.each(chart.series[0].data, function(p, i) {

var newx = chart.plotWidth-p.dataLabel.translateX;

var oldx = p.dataLabel.translateX;

var bw = $(p.dataLabel.div).find('b').width();

var iw = $(p.dataLabel.div).find('i').width();

$(p.dataLabel.div).find('b').css("marginRight",oldx-newx-bw-iw-36);

p.dataLabel.attr({

x: newx+10,

'text-anchor': 'middle'

});

});

}

}

},

title: {

text: 'Sales funnel',

x: -50

},

plotOptions: {

series: {

dataLabels: {

connectorWidth: 0,

distance: 0,

useHTML: true,

enabled: true,

// format: '{point.name} ({point.y:,.0f})',

formatter: function(){

return ""+this.point.name+" ("+this.point.y+")";

},

color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',

softConnector: true

},

neckWidth: '20%',//漏斗图设置成倒金字塔

neckHeight: '0%'//漏斗图设置成倒金字塔

//-- Other available options

// height: pixels or percent

// width: pixels or percent

}

},

legend: {

enabled: false

},

series: [{

name: 'Unique users',

data: [

['下单会员数', 564],

['支付会员数', 264],

['取消会员数', 197],

['在线支付会员数', 97],

['货到付款', 86]

]

}]

});

});

{"resource":"1,3,5,7,10","options":"{\"editor\":{\"saveLayout\":false,\"saveFold\":false,\"autoFormat\":true},\"hcode\":{\"layoutId\":0}}","code":{"code":"KNFf2u","name":"漏斗图设置成倒金字塔及文字居中","version":0,"doctype":0,"description":"","meta":"","newGroup":2032,"group":{"id":2032,"name":"funnel","code":"yanchengye"}}}