You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
289 lines
6.4 KiB
289 lines
6.4 KiB
/** |
|
* @license |
|
* Highcharts funnel module, Beta |
|
* |
|
* (c) 2010-2012 Torstein Hønsi |
|
* |
|
* License: www.highcharts.com/license |
|
*/ |
|
|
|
/*global Highcharts */ |
|
(function (Highcharts) { |
|
|
|
'use strict'; |
|
|
|
// create shortcuts |
|
var defaultOptions = Highcharts.getOptions(), |
|
defaultPlotOptions = defaultOptions.plotOptions, |
|
seriesTypes = Highcharts.seriesTypes, |
|
merge = Highcharts.merge, |
|
noop = function () {}, |
|
each = Highcharts.each; |
|
|
|
// set default options |
|
defaultPlotOptions.funnel = merge(defaultPlotOptions.pie, { |
|
center: ['50%', '50%'], |
|
width: '90%', |
|
neckWidth: '30%', |
|
height: '100%', |
|
neckHeight: '25%', |
|
|
|
dataLabels: { |
|
//position: 'right', |
|
connectorWidth: 1, |
|
connectorColor: '#606060' |
|
}, |
|
size: true, // to avoid adapting to data label size in Pie.drawDataLabels |
|
states: { |
|
select: { |
|
color: '#C0C0C0', |
|
borderColor: '#000000', |
|
shadow: false |
|
} |
|
} |
|
}); |
|
|
|
|
|
seriesTypes.funnel = Highcharts.extendClass(seriesTypes.pie, { |
|
|
|
type: 'funnel', |
|
animate: noop, |
|
|
|
/** |
|
* Overrides the pie translate method |
|
*/ |
|
translate: function () { |
|
|
|
var |
|
// Get positions - either an integer or a percentage string must be given |
|
getLength = function (length, relativeTo) { |
|
return (/%$/).test(length) ? |
|
relativeTo * parseInt(length, 10) / 100 : |
|
parseInt(length, 10); |
|
}, |
|
|
|
sum = 0, |
|
series = this, |
|
chart = series.chart, |
|
plotWidth = chart.plotWidth, |
|
plotHeight = chart.plotHeight, |
|
cumulative = 0, // start at top |
|
options = series.options, |
|
center = options.center, |
|
centerX = getLength(center[0], plotWidth), |
|
centerY = getLength(center[0], plotHeight), |
|
width = getLength(options.width, plotWidth), |
|
tempWidth, |
|
getWidthAt, |
|
height = getLength(options.height, plotHeight), |
|
neckWidth = getLength(options.neckWidth, plotWidth), |
|
neckHeight = getLength(options.neckHeight, plotHeight), |
|
neckY = height - neckHeight, |
|
data = series.data, |
|
path, |
|
fraction, |
|
half = options.dataLabels.position === 'left' ? 1 : 0, |
|
|
|
x1, |
|
y1, |
|
x2, |
|
x3, |
|
y3, |
|
x4, |
|
y5; |
|
|
|
// Return the width at a specific y coordinate |
|
series.getWidthAt = getWidthAt = function (y) { |
|
return y > height - neckHeight || height === neckHeight ? |
|
neckWidth : |
|
neckWidth + (width - neckWidth) * ((height - neckHeight - y) / (height - neckHeight)); |
|
}; |
|
series.getX = function (y, half) { |
|
return centerX + (half ? -1 : 1) * ((getWidthAt(y) / 2) + options.dataLabels.distance); |
|
}; |
|
|
|
// Expose |
|
series.center = [centerX, centerY, height]; |
|
series.centerX = centerX; |
|
|
|
/* |
|
* Individual point coordinate naming: |
|
* |
|
* x1,y1 _________________ x2,y1 |
|
* \ / |
|
* \ / |
|
* \ / |
|
* \ / |
|
* \ / |
|
* x3,y3 _________ x4,y3 |
|
* |
|
* Additional for the base of the neck: |
|
* |
|
* | | |
|
* | | |
|
* | | |
|
* x3,y5 _________ x4,y5 |
|
*/ |
|
|
|
|
|
|
|
|
|
// get the total sum |
|
each(data, function (point) { |
|
sum += point.y; |
|
}); |
|
|
|
each(data, function (point) { |
|
// set start and end positions |
|
y5 = null; |
|
fraction = sum ? point.y / sum : 0; |
|
y1 = centerY - height / 2 + cumulative * height; |
|
y3 = y1 + fraction * height; |
|
//tempWidth = neckWidth + (width - neckWidth) * ((height - neckHeight - y1) / (height - neckHeight)); |
|
tempWidth = getWidthAt(y1); |
|
x1 = centerX - tempWidth / 2; |
|
x2 = x1 + tempWidth; |
|
tempWidth = getWidthAt(y3); |
|
x3 = centerX - tempWidth / 2; |
|
x4 = x3 + tempWidth; |
|
|
|
// the entire point is within the neck |
|
if (y1 > neckY) { |
|
x1 = x3 = centerX - neckWidth / 2; |
|
x2 = x4 = centerX + neckWidth / 2; |
|
|
|
// the base of the neck |
|
} else if (y3 > neckY) { |
|
y5 = y3; |
|
|
|
tempWidth = getWidthAt(neckY); |
|
x3 = centerX - tempWidth / 2; |
|
x4 = x3 + tempWidth; |
|
|
|
y3 = neckY; |
|
} |
|
|
|
// save the path |
|
path = [ |
|
'M', |
|
x1, y1, |
|
'L', |
|
x2, y1, |
|
x4, y3 |
|
]; |
|
if (y5) { |
|
path.push(x4, y5, x3, y5); |
|
} |
|
path.push(x3, y3, 'Z'); |
|
|
|
// prepare for using shared dr |
|
point.shapeType = 'path'; |
|
point.shapeArgs = { d: path }; |
|
|
|
|
|
// for tooltips and data labels |
|
point.percentage = fraction * 100; |
|
point.plotX = centerX; |
|
point.plotY = (y1 + (y5 || y3)) / 2; |
|
|
|
// Placement of tooltips and data labels |
|
point.tooltipPos = [ |
|
centerX, |
|
point.plotY |
|
]; |
|
|
|
// Slice is a noop on funnel points |
|
point.slice = noop; |
|
|
|
// Mimicking pie data label placement logic |
|
point.half = half; |
|
|
|
cumulative += fraction; |
|
}); |
|
|
|
|
|
series.setTooltipPoints(); |
|
}, |
|
/** |
|
* Draw a single point (wedge) |
|
* @param {Object} point The point object |
|
* @param {Object} color The color of the point |
|
* @param {Number} brightness The brightness relative to the color |
|
*/ |
|
drawPoints: function () { |
|
var series = this, |
|
options = series.options, |
|
chart = series.chart, |
|
renderer = chart.renderer; |
|
|
|
each(series.data, function (point) { |
|
|
|
var graphic = point.graphic, |
|
shapeArgs = point.shapeArgs; |
|
|
|
if (!graphic) { // Create the shapes |
|
point.graphic = renderer.path(shapeArgs). |
|
attr({ |
|
fill: point.color, |
|
stroke: options.borderColor, |
|
'stroke-width': options.borderWidth |
|
}). |
|
add(series.group); |
|
|
|
} else { // Update the shapes |
|
graphic.animate(shapeArgs); |
|
} |
|
}); |
|
}, |
|
|
|
/** |
|
* Funnel items don't have angles (#2289) |
|
*/ |
|
sortByAngle: noop, |
|
|
|
/** |
|
* Extend the pie data label method |
|
*/ |
|
drawDataLabels: function () { |
|
var data = this.data, |
|
labelDistance = this.options.dataLabels.distance, |
|
leftSide, |
|
sign, |
|
point, |
|
i = data.length, |
|
x, |
|
y; |
|
|
|
// In the original pie label anticollision logic, the slots are distributed |
|
// from one labelDistance above to one labelDistance below the pie. In funnels |
|
// we don't want this. |
|
this.center[2] -= 2 * labelDistance; |
|
|
|
// Set the label position array for each point. |
|
while (i--) { |
|
point = data[i]; |
|
leftSide = point.half; |
|
sign = leftSide ? 1 : -1; |
|
y = point.plotY; |
|
x = this.getX(y, leftSide); |
|
|
|
// set the anchor point for data labels |
|
point.labelPos = [ |
|
0, // first break of connector |
|
y, // a/a |
|
x + (labelDistance - 5) * sign, // second break, right outside point shape |
|
y, // a/a |
|
x + labelDistance * sign, // landing point for connector |
|
y, // a/a |
|
leftSide ? 'right' : 'left', // alignment |
|
0 // center angle |
|
]; |
|
} |
|
|
|
seriesTypes.pie.prototype.drawDataLabels.call(this); |
|
} |
|
|
|
}); |
|
|
|
|
|
}(Highcharts));
|
|
|