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.
447 lines
11 KiB
447 lines
11 KiB
/** |
|
* Highcharts Drilldown plugin |
|
* |
|
* Author: Torstein Honsi |
|
* Last revision: 2013-02-18 |
|
* License: MIT License |
|
* |
|
* Demo: http://jsfiddle.net/highcharts/Vf3yT/ |
|
*/ |
|
|
|
/*global HighchartsAdapter*/ |
|
(function (H) { |
|
|
|
"use strict"; |
|
|
|
var noop = function () {}, |
|
defaultOptions = H.getOptions(), |
|
each = H.each, |
|
extend = H.extend, |
|
wrap = H.wrap, |
|
Chart = H.Chart, |
|
seriesTypes = H.seriesTypes, |
|
PieSeries = seriesTypes.pie, |
|
ColumnSeries = seriesTypes.column, |
|
fireEvent = HighchartsAdapter.fireEvent; |
|
|
|
// Utilities |
|
function tweenColors(startColor, endColor, pos) { |
|
var rgba = [ |
|
Math.round(startColor[0] + (endColor[0] - startColor[0]) * pos), |
|
Math.round(startColor[1] + (endColor[1] - startColor[1]) * pos), |
|
Math.round(startColor[2] + (endColor[2] - startColor[2]) * pos), |
|
startColor[3] + (endColor[3] - startColor[3]) * pos |
|
]; |
|
return 'rgba(' + rgba.join(',') + ')'; |
|
} |
|
|
|
// Add language |
|
extend(defaultOptions.lang, { |
|
drillUpText: '◁ Back to {series.name}' |
|
}); |
|
defaultOptions.drilldown = { |
|
activeAxisLabelStyle: { |
|
cursor: 'pointer', |
|
color: '#039', |
|
fontWeight: 'bold', |
|
textDecoration: 'underline' |
|
}, |
|
activeDataLabelStyle: { |
|
cursor: 'pointer', |
|
color: '#039', |
|
fontWeight: 'bold', |
|
textDecoration: 'underline' |
|
}, |
|
animation: { |
|
duration: 500 |
|
}, |
|
drillUpButton: { |
|
position: { |
|
align: 'right', |
|
x: -10, |
|
y: 10 |
|
} |
|
// relativeTo: 'plotBox' |
|
// theme |
|
} |
|
}; |
|
|
|
/** |
|
* A general fadeIn method |
|
*/ |
|
H.SVGRenderer.prototype.Element.prototype.fadeIn = function () { |
|
this |
|
.attr({ |
|
opacity: 0.1, |
|
visibility: 'visible' |
|
}) |
|
.animate({ |
|
opacity: 1 |
|
}, { |
|
duration: 250 |
|
}); |
|
}; |
|
|
|
// Extend the Chart prototype |
|
Chart.prototype.drilldownLevels = []; |
|
|
|
Chart.prototype.addSeriesAsDrilldown = function (point, ddOptions) { |
|
var oldSeries = point.series, |
|
xAxis = oldSeries.xAxis, |
|
yAxis = oldSeries.yAxis, |
|
newSeries, |
|
color = point.color || oldSeries.color, |
|
pointIndex, |
|
level; |
|
|
|
ddOptions = extend({ |
|
color: color |
|
}, ddOptions); |
|
pointIndex = HighchartsAdapter.inArray(this, oldSeries.points); |
|
level = { |
|
seriesOptions: oldSeries.userOptions, |
|
shapeArgs: point.shapeArgs, |
|
bBox: point.graphic.getBBox(), |
|
color: color, |
|
newSeries: ddOptions, |
|
pointOptions: oldSeries.options.data[pointIndex], |
|
pointIndex: pointIndex, |
|
oldExtremes: { |
|
xMin: xAxis && xAxis.userMin, |
|
xMax: xAxis && xAxis.userMax, |
|
yMin: yAxis && yAxis.userMin, |
|
yMax: yAxis && yAxis.userMax |
|
} |
|
}; |
|
|
|
this.drilldownLevels.push(level); |
|
|
|
newSeries = this.addSeries(ddOptions, false); |
|
if (xAxis) { |
|
xAxis.oldPos = xAxis.pos; |
|
xAxis.userMin = xAxis.userMax = null; |
|
yAxis.userMin = yAxis.userMax = null; |
|
} |
|
|
|
// Run fancy cross-animation on supported and equal types |
|
if (oldSeries.type === newSeries.type) { |
|
newSeries.animate = newSeries.animateDrilldown || noop; |
|
newSeries.options.animation = true; |
|
} |
|
|
|
oldSeries.remove(false); |
|
|
|
this.redraw(); |
|
this.showDrillUpButton(); |
|
}; |
|
|
|
Chart.prototype.getDrilldownBackText = function () { |
|
var lastLevel = this.drilldownLevels[this.drilldownLevels.length - 1]; |
|
|
|
return this.options.lang.drillUpText.replace('{series.name}', lastLevel.seriesOptions.name); |
|
|
|
}; |
|
|
|
Chart.prototype.showDrillUpButton = function () { |
|
var chart = this, |
|
backText = this.getDrilldownBackText(), |
|
buttonOptions = chart.options.drilldown.drillUpButton; |
|
|
|
|
|
if (!this.drillUpButton) { |
|
this.drillUpButton = this.renderer.button( |
|
backText, |
|
null, |
|
null, |
|
function () { |
|
chart.drillUp(); |
|
} |
|
) |
|
.attr(extend({ |
|
align: buttonOptions.position.align, |
|
zIndex: 9 |
|
}, buttonOptions.theme)) |
|
.add() |
|
.align(buttonOptions.position, false, buttonOptions.relativeTo || 'plotBox'); |
|
} else { |
|
this.drillUpButton.attr({ |
|
text: backText |
|
}) |
|
.align(); |
|
} |
|
}; |
|
|
|
Chart.prototype.drillUp = function () { |
|
var chart = this, |
|
level = chart.drilldownLevels.pop(), |
|
oldSeries = chart.series[0], |
|
oldExtremes = level.oldExtremes, |
|
newSeries = chart.addSeries(level.seriesOptions, false); |
|
|
|
fireEvent(chart, 'drillup', { seriesOptions: level.seriesOptions }); |
|
|
|
if (newSeries.type === oldSeries.type) { |
|
newSeries.drilldownLevel = level; |
|
newSeries.animate = newSeries.animateDrillupTo || noop; |
|
newSeries.options.animation = true; |
|
|
|
if (oldSeries.animateDrillupFrom) { |
|
oldSeries.animateDrillupFrom(level); |
|
} |
|
} |
|
|
|
oldSeries.remove(false); |
|
|
|
// Reset the zoom level of the upper series |
|
if (newSeries.xAxis) { |
|
newSeries.xAxis.setExtremes(oldExtremes.xMin, oldExtremes.xMax, false); |
|
newSeries.yAxis.setExtremes(oldExtremes.yMin, oldExtremes.yMax, false); |
|
} |
|
|
|
|
|
this.redraw(); |
|
|
|
if (this.drilldownLevels.length === 0) { |
|
this.drillUpButton = this.drillUpButton.destroy(); |
|
} else { |
|
this.drillUpButton.attr({ |
|
text: this.getDrilldownBackText() |
|
}) |
|
.align(); |
|
} |
|
}; |
|
|
|
PieSeries.prototype.animateDrilldown = function (init) { |
|
var level = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1], |
|
animationOptions = this.chart.options.drilldown.animation, |
|
animateFrom = level.shapeArgs, |
|
start = animateFrom.start, |
|
angle = animateFrom.end - start, |
|
startAngle = angle / this.points.length, |
|
startColor = H.Color(level.color).rgba; |
|
|
|
if (!init) { |
|
each(this.points, function (point, i) { |
|
var endColor = H.Color(point.color).rgba; |
|
|
|
/*jslint unparam: true*/ |
|
point.graphic |
|
.attr(H.merge(animateFrom, { |
|
start: start + i * startAngle, |
|
end: start + (i + 1) * startAngle |
|
})) |
|
.animate(point.shapeArgs, H.merge(animationOptions, { |
|
step: function (val, fx) { |
|
if (fx.prop === 'start') { |
|
this.attr({ |
|
fill: tweenColors(startColor, endColor, fx.pos) |
|
}); |
|
} |
|
} |
|
})); |
|
/*jslint unparam: false*/ |
|
}); |
|
} |
|
}; |
|
|
|
|
|
/** |
|
* When drilling up, keep the upper series invisible until the lower series has |
|
* moved into place |
|
*/ |
|
PieSeries.prototype.animateDrillupTo = |
|
ColumnSeries.prototype.animateDrillupTo = function (init) { |
|
if (!init) { |
|
var newSeries = this, |
|
level = newSeries.drilldownLevel; |
|
|
|
each(this.points, function (point) { |
|
point.graphic.hide(); |
|
if (point.dataLabel) { |
|
point.dataLabel.hide(); |
|
} |
|
if (point.connector) { |
|
point.connector.hide(); |
|
} |
|
}); |
|
|
|
|
|
// Do dummy animation on first point to get to complete |
|
setTimeout(function () { |
|
each(newSeries.points, function (point, i) { |
|
// Fade in other points |
|
var verb = i === level.pointIndex ? 'show' : 'fadeIn'; |
|
point.graphic[verb](); |
|
if (point.dataLabel) { |
|
point.dataLabel[verb](); |
|
} |
|
if (point.connector) { |
|
point.connector[verb](); |
|
} |
|
}); |
|
}, Math.max(this.chart.options.drilldown.animation.duration - 50, 0)); |
|
|
|
// Reset |
|
this.animate = noop; |
|
} |
|
|
|
}; |
|
|
|
ColumnSeries.prototype.animateDrilldown = function (init) { |
|
var animateFrom = this.chart.drilldownLevels[this.chart.drilldownLevels.length - 1].shapeArgs, |
|
animationOptions = this.chart.options.drilldown.animation; |
|
|
|
if (!init) { |
|
|
|
animateFrom.x += (this.xAxis.oldPos - this.xAxis.pos); |
|
|
|
each(this.points, function (point) { |
|
point.graphic |
|
.attr(animateFrom) |
|
.animate(point.shapeArgs, animationOptions); |
|
}); |
|
} |
|
|
|
}; |
|
|
|
/** |
|
* When drilling up, pull out the individual point graphics from the lower series |
|
* and animate them into the origin point in the upper series. |
|
*/ |
|
ColumnSeries.prototype.animateDrillupFrom = |
|
PieSeries.prototype.animateDrillupFrom = |
|
function (level) { |
|
var animationOptions = this.chart.options.drilldown.animation, |
|
group = this.group; |
|
|
|
delete this.group; |
|
each(this.points, function (point) { |
|
var graphic = point.graphic, |
|
startColor = H.Color(point.color).rgba; |
|
|
|
delete point.graphic; |
|
|
|
/*jslint unparam: true*/ |
|
graphic.animate(level.shapeArgs, H.merge(animationOptions, { |
|
|
|
step: function (val, fx) { |
|
if (fx.prop === 'start') { |
|
this.attr({ |
|
fill: tweenColors(startColor, H.Color(level.color).rgba, fx.pos) |
|
}); |
|
} |
|
}, |
|
complete: function () { |
|
graphic.destroy(); |
|
if (group) { |
|
group = group.destroy(); |
|
} |
|
} |
|
})); |
|
/*jslint unparam: false*/ |
|
}); |
|
}; |
|
|
|
H.Point.prototype.doDrilldown = function () { |
|
var series = this.series, |
|
chart = series.chart, |
|
drilldown = chart.options.drilldown, |
|
i = drilldown.series.length, |
|
seriesOptions; |
|
|
|
while (i-- && !seriesOptions) { |
|
if (drilldown.series[i].id === this.drilldown) { |
|
seriesOptions = drilldown.series[i]; |
|
} |
|
} |
|
|
|
// Fire the event. If seriesOptions is undefined, the implementer can check for |
|
// seriesOptions, and call addSeriesAsDrilldown async if necessary. |
|
fireEvent(chart, 'drilldown', { |
|
point: this, |
|
seriesOptions: seriesOptions |
|
}); |
|
|
|
if (seriesOptions) { |
|
chart.addSeriesAsDrilldown(this, seriesOptions); |
|
} |
|
|
|
}; |
|
|
|
wrap(H.Point.prototype, 'init', function (proceed, series, options, x) { |
|
var point = proceed.call(this, series, options, x), |
|
chart = series.chart, |
|
tick = series.xAxis && series.xAxis.ticks[x], |
|
tickLabel = tick && tick.label; |
|
|
|
if (point.drilldown) { |
|
|
|
// Add the click event to the point label |
|
H.addEvent(point, 'click', function () { |
|
point.doDrilldown(); |
|
}); |
|
|
|
// Make axis labels clickable |
|
if (tickLabel) { |
|
if (!tickLabel._basicStyle) { |
|
tickLabel._basicStyle = tickLabel.element.getAttribute('style'); |
|
} |
|
tickLabel |
|
.addClass('highcharts-drilldown-axis-label') |
|
.css(chart.options.drilldown.activeAxisLabelStyle) |
|
.on('click', function () { |
|
if (point.doDrilldown) { |
|
point.doDrilldown(); |
|
} |
|
}); |
|
|
|
} |
|
} else if (tickLabel && tickLabel._basicStyle) { |
|
tickLabel.element.setAttribute('style', tickLabel._basicStyle); |
|
} |
|
|
|
return point; |
|
}); |
|
|
|
wrap(H.Series.prototype, 'drawDataLabels', function (proceed) { |
|
var css = this.chart.options.drilldown.activeDataLabelStyle; |
|
|
|
proceed.call(this); |
|
|
|
each(this.points, function (point) { |
|
if (point.drilldown && point.dataLabel) { |
|
point.dataLabel |
|
.attr({ |
|
'class': 'highcharts-drilldown-data-label' |
|
}) |
|
.css(css) |
|
.on('click', function () { |
|
point.doDrilldown(); |
|
}); |
|
} |
|
}); |
|
}); |
|
|
|
// Mark the trackers with a pointer |
|
ColumnSeries.prototype.supportsDrilldown = true; |
|
PieSeries.prototype.supportsDrilldown = true; |
|
var type, |
|
drawTrackerWrapper = function (proceed) { |
|
proceed.call(this); |
|
each(this.points, function (point) { |
|
if (point.drilldown && point.graphic) { |
|
point.graphic |
|
.attr({ |
|
'class': 'highcharts-drilldown-point' |
|
}) |
|
.css({ cursor: 'pointer' }); |
|
} |
|
}); |
|
}; |
|
for (type in seriesTypes) { |
|
if (seriesTypes[type].prototype.supportsDrilldown) { |
|
wrap(seriesTypes[type].prototype, 'drawTracker', drawTrackerWrapper); |
|
} |
|
} |
|
|
|
}(Highcharts));
|
|
|