| 9 |
lars |
1 |
/**
|
|
|
2 |
* @license Highstock JS v2.1.8 (2015-08-20)
|
|
|
3 |
*
|
|
|
4 |
* (c) 2011-2014 Torstein Honsi
|
|
|
5 |
*
|
|
|
6 |
* License: www.highcharts.com/license
|
|
|
7 |
*/
|
|
|
8 |
|
|
|
9 |
/*global HighchartsAdapter*/
|
|
|
10 |
(function (Highcharts) {
|
|
|
11 |
|
|
|
12 |
|
|
|
13 |
var UNDEFINED,
|
|
|
14 |
Axis = Highcharts.Axis,
|
|
|
15 |
Chart = Highcharts.Chart,
|
|
|
16 |
Color = Highcharts.Color,
|
|
|
17 |
Legend = Highcharts.Legend,
|
|
|
18 |
LegendSymbolMixin = Highcharts.LegendSymbolMixin,
|
|
|
19 |
Series = Highcharts.Series,
|
|
|
20 |
Point = Highcharts.Point,
|
|
|
21 |
|
|
|
22 |
defaultOptions = Highcharts.getOptions(),
|
|
|
23 |
each = Highcharts.each,
|
|
|
24 |
extend = Highcharts.extend,
|
|
|
25 |
extendClass = Highcharts.extendClass,
|
|
|
26 |
merge = Highcharts.merge,
|
|
|
27 |
pick = Highcharts.pick,
|
|
|
28 |
seriesTypes = Highcharts.seriesTypes,
|
|
|
29 |
wrap = Highcharts.wrap,
|
|
|
30 |
noop = function () {};
|
|
|
31 |
|
|
|
32 |
|
|
|
33 |
|
|
|
34 |
|
|
|
35 |
/**
|
|
|
36 |
* The ColorAxis object for inclusion in gradient legends
|
|
|
37 |
*/
|
|
|
38 |
var ColorAxis = Highcharts.ColorAxis = function () {
|
|
|
39 |
this.isColorAxis = true;
|
|
|
40 |
this.init.apply(this, arguments);
|
|
|
41 |
};
|
|
|
42 |
extend(ColorAxis.prototype, Axis.prototype);
|
|
|
43 |
extend(ColorAxis.prototype, {
|
|
|
44 |
defaultColorAxisOptions: {
|
|
|
45 |
lineWidth: 0,
|
|
|
46 |
minPadding: 0,
|
|
|
47 |
maxPadding: 0,
|
|
|
48 |
gridLineWidth: 1,
|
|
|
49 |
tickPixelInterval: 72,
|
|
|
50 |
startOnTick: true,
|
|
|
51 |
endOnTick: true,
|
|
|
52 |
offset: 0,
|
|
|
53 |
marker: {
|
|
|
54 |
animation: {
|
|
|
55 |
duration: 50
|
|
|
56 |
},
|
|
|
57 |
color: 'gray',
|
|
|
58 |
width: 0.01
|
|
|
59 |
},
|
|
|
60 |
labels: {
|
|
|
61 |
overflow: 'justify'
|
|
|
62 |
},
|
|
|
63 |
minColor: '#EFEFFF',
|
|
|
64 |
maxColor: '#003875',
|
|
|
65 |
tickLength: 5
|
|
|
66 |
},
|
|
|
67 |
init: function (chart, userOptions) {
|
|
|
68 |
var horiz = chart.options.legend.layout !== 'vertical',
|
|
|
69 |
options;
|
|
|
70 |
|
|
|
71 |
// Build the options
|
|
|
72 |
options = merge(this.defaultColorAxisOptions, {
|
|
|
73 |
side: horiz ? 2 : 1,
|
|
|
74 |
reversed: !horiz
|
|
|
75 |
}, userOptions, {
|
|
|
76 |
opposite: !horiz,
|
|
|
77 |
showEmpty: false,
|
|
|
78 |
title: null,
|
|
|
79 |
isColor: true
|
|
|
80 |
});
|
|
|
81 |
|
|
|
82 |
Axis.prototype.init.call(this, chart, options);
|
|
|
83 |
|
|
|
84 |
// Base init() pushes it to the xAxis array, now pop it again
|
|
|
85 |
//chart[this.isXAxis ? 'xAxis' : 'yAxis'].pop();
|
|
|
86 |
|
|
|
87 |
// Prepare data classes
|
|
|
88 |
if (userOptions.dataClasses) {
|
|
|
89 |
this.initDataClasses(userOptions);
|
|
|
90 |
}
|
|
|
91 |
this.initStops(userOptions);
|
|
|
92 |
|
|
|
93 |
// Override original axis properties
|
|
|
94 |
this.horiz = horiz;
|
|
|
95 |
this.zoomEnabled = false;
|
|
|
96 |
},
|
|
|
97 |
|
|
|
98 |
/*
|
|
|
99 |
* Return an intermediate color between two colors, according to pos where 0
|
|
|
100 |
* is the from color and 1 is the to color.
|
|
|
101 |
* NOTE: Changes here should be copied
|
|
|
102 |
* to the same function in drilldown.src.js and solid-gauge-src.js.
|
|
|
103 |
*/
|
|
|
104 |
tweenColors: function (from, to, pos) {
|
|
|
105 |
// Check for has alpha, because rgba colors perform worse due to lack of
|
|
|
106 |
// support in WebKit.
|
|
|
107 |
var hasAlpha,
|
|
|
108 |
ret;
|
|
|
109 |
|
|
|
110 |
// Unsupported color, return to-color (#3920)
|
|
|
111 |
if (!to.rgba.length || !from.rgba.length) {
|
|
|
112 |
ret = to.raw || 'none';
|
|
|
113 |
|
|
|
114 |
// Interpolate
|
|
|
115 |
} else {
|
|
|
116 |
from = from.rgba;
|
|
|
117 |
to = to.rgba;
|
|
|
118 |
hasAlpha = (to[3] !== 1 || from[3] !== 1);
|
|
|
119 |
ret = (hasAlpha ? 'rgba(' : 'rgb(') +
|
|
|
120 |
Math.round(to[0] + (from[0] - to[0]) * (1 - pos)) + ',' +
|
|
|
121 |
Math.round(to[1] + (from[1] - to[1]) * (1 - pos)) + ',' +
|
|
|
122 |
Math.round(to[2] + (from[2] - to[2]) * (1 - pos)) +
|
|
|
123 |
(hasAlpha ? (',' + (to[3] + (from[3] - to[3]) * (1 - pos))) : '') + ')';
|
|
|
124 |
}
|
|
|
125 |
return ret;
|
|
|
126 |
},
|
|
|
127 |
|
|
|
128 |
initDataClasses: function (userOptions) {
|
|
|
129 |
var axis = this,
|
|
|
130 |
chart = this.chart,
|
|
|
131 |
dataClasses,
|
|
|
132 |
colorCounter = 0,
|
|
|
133 |
options = this.options,
|
|
|
134 |
len = userOptions.dataClasses.length;
|
|
|
135 |
this.dataClasses = dataClasses = [];
|
|
|
136 |
this.legendItems = [];
|
|
|
137 |
|
|
|
138 |
each(userOptions.dataClasses, function (dataClass, i) {
|
|
|
139 |
var colors;
|
|
|
140 |
|
|
|
141 |
dataClass = merge(dataClass);
|
|
|
142 |
dataClasses.push(dataClass);
|
|
|
143 |
if (!dataClass.color) {
|
|
|
144 |
if (options.dataClassColor === 'category') {
|
|
|
145 |
colors = chart.options.colors;
|
|
|
146 |
dataClass.color = colors[colorCounter++];
|
|
|
147 |
// loop back to zero
|
|
|
148 |
if (colorCounter === colors.length) {
|
|
|
149 |
colorCounter = 0;
|
|
|
150 |
}
|
|
|
151 |
} else {
|
|
|
152 |
dataClass.color = axis.tweenColors(
|
|
|
153 |
Color(options.minColor),
|
|
|
154 |
Color(options.maxColor),
|
|
|
155 |
len < 2 ? 0.5 : i / (len - 1) // #3219
|
|
|
156 |
);
|
|
|
157 |
}
|
|
|
158 |
}
|
|
|
159 |
});
|
|
|
160 |
},
|
|
|
161 |
|
|
|
162 |
initStops: function (userOptions) {
|
|
|
163 |
this.stops = userOptions.stops || [
|
|
|
164 |
[0, this.options.minColor],
|
|
|
165 |
[1, this.options.maxColor]
|
|
|
166 |
];
|
|
|
167 |
each(this.stops, function (stop) {
|
|
|
168 |
stop.color = Color(stop[1]);
|
|
|
169 |
});
|
|
|
170 |
},
|
|
|
171 |
|
|
|
172 |
/**
|
|
|
173 |
* Extend the setOptions method to process extreme colors and color
|
|
|
174 |
* stops.
|
|
|
175 |
*/
|
|
|
176 |
setOptions: function (userOptions) {
|
|
|
177 |
Axis.prototype.setOptions.call(this, userOptions);
|
|
|
178 |
|
|
|
179 |
this.options.crosshair = this.options.marker;
|
|
|
180 |
this.coll = 'colorAxis';
|
|
|
181 |
},
|
|
|
182 |
|
|
|
183 |
setAxisSize: function () {
|
|
|
184 |
var symbol = this.legendSymbol,
|
|
|
185 |
chart = this.chart,
|
|
|
186 |
x,
|
|
|
187 |
y,
|
|
|
188 |
width,
|
|
|
189 |
height;
|
|
|
190 |
|
|
|
191 |
if (symbol) {
|
|
|
192 |
this.left = x = symbol.attr('x');
|
|
|
193 |
this.top = y = symbol.attr('y');
|
|
|
194 |
this.width = width = symbol.attr('width');
|
|
|
195 |
this.height = height = symbol.attr('height');
|
|
|
196 |
this.right = chart.chartWidth - x - width;
|
|
|
197 |
this.bottom = chart.chartHeight - y - height;
|
|
|
198 |
|
|
|
199 |
this.len = this.horiz ? width : height;
|
|
|
200 |
this.pos = this.horiz ? x : y;
|
|
|
201 |
}
|
|
|
202 |
},
|
|
|
203 |
|
|
|
204 |
/**
|
|
|
205 |
* Translate from a value to a color
|
|
|
206 |
*/
|
|
|
207 |
toColor: function (value, point) {
|
|
|
208 |
var pos,
|
|
|
209 |
stops = this.stops,
|
|
|
210 |
from,
|
|
|
211 |
to,
|
|
|
212 |
color,
|
|
|
213 |
dataClasses = this.dataClasses,
|
|
|
214 |
dataClass,
|
|
|
215 |
i;
|
|
|
216 |
|
|
|
217 |
if (dataClasses) {
|
|
|
218 |
i = dataClasses.length;
|
|
|
219 |
while (i--) {
|
|
|
220 |
dataClass = dataClasses[i];
|
|
|
221 |
from = dataClass.from;
|
|
|
222 |
to = dataClass.to;
|
|
|
223 |
if ((from === UNDEFINED || value >= from) && (to === UNDEFINED || value <= to)) {
|
|
|
224 |
color = dataClass.color;
|
|
|
225 |
if (point) {
|
|
|
226 |
point.dataClass = i;
|
|
|
227 |
}
|
|
|
228 |
break;
|
|
|
229 |
}
|
|
|
230 |
}
|
|
|
231 |
|
|
|
232 |
} else {
|
|
|
233 |
|
|
|
234 |
if (this.isLog) {
|
|
|
235 |
value = this.val2lin(value);
|
|
|
236 |
}
|
|
|
237 |
pos = 1 - ((this.max - value) / ((this.max - this.min) || 1));
|
|
|
238 |
i = stops.length;
|
|
|
239 |
while (i--) {
|
|
|
240 |
if (pos > stops[i][0]) {
|
|
|
241 |
break;
|
|
|
242 |
}
|
|
|
243 |
}
|
|
|
244 |
from = stops[i] || stops[i + 1];
|
|
|
245 |
to = stops[i + 1] || from;
|
|
|
246 |
|
|
|
247 |
// The position within the gradient
|
|
|
248 |
pos = 1 - (to[0] - pos) / ((to[0] - from[0]) || 1);
|
|
|
249 |
|
|
|
250 |
color = this.tweenColors(
|
|
|
251 |
from.color,
|
|
|
252 |
to.color,
|
|
|
253 |
pos
|
|
|
254 |
);
|
|
|
255 |
}
|
|
|
256 |
return color;
|
|
|
257 |
},
|
|
|
258 |
|
|
|
259 |
getOffset: function () {
|
|
|
260 |
var group = this.legendGroup,
|
|
|
261 |
sideOffset = this.chart.axisOffset[this.side];
|
|
|
262 |
|
|
|
263 |
if (group) {
|
|
|
264 |
|
|
|
265 |
Axis.prototype.getOffset.call(this);
|
|
|
266 |
|
|
|
267 |
if (!this.axisGroup.parentGroup) {
|
|
|
268 |
|
|
|
269 |
// Move the axis elements inside the legend group
|
|
|
270 |
this.axisGroup.add(group);
|
|
|
271 |
this.gridGroup.add(group);
|
|
|
272 |
this.labelGroup.add(group);
|
|
|
273 |
|
|
|
274 |
this.added = true;
|
|
|
275 |
|
|
|
276 |
this.labelLeft = 0;
|
|
|
277 |
this.labelRight = this.width;
|
|
|
278 |
}
|
|
|
279 |
// Reset it to avoid color axis reserving space
|
|
|
280 |
this.chart.axisOffset[this.side] = sideOffset;
|
|
|
281 |
}
|
|
|
282 |
},
|
|
|
283 |
|
|
|
284 |
/**
|
|
|
285 |
* Create the color gradient
|
|
|
286 |
*/
|
|
|
287 |
setLegendColor: function () {
|
|
|
288 |
var grad,
|
|
|
289 |
horiz = this.horiz,
|
|
|
290 |
options = this.options,
|
|
|
291 |
reversed = this.reversed;
|
|
|
292 |
|
|
|
293 |
grad = horiz ? [+reversed, 0, +!reversed, 0] : [0, +!reversed, 0, +reversed]; // #3190
|
|
|
294 |
this.legendColor = {
|
|
|
295 |
linearGradient: { x1: grad[0], y1: grad[1], x2: grad[2], y2: grad[3] },
|
|
|
296 |
stops: options.stops || [
|
|
|
297 |
[0, options.minColor],
|
|
|
298 |
[1, options.maxColor]
|
|
|
299 |
]
|
|
|
300 |
};
|
|
|
301 |
},
|
|
|
302 |
|
|
|
303 |
/**
|
|
|
304 |
* The color axis appears inside the legend and has its own legend symbol
|
|
|
305 |
*/
|
|
|
306 |
drawLegendSymbol: function (legend, item) {
|
|
|
307 |
var padding = legend.padding,
|
|
|
308 |
legendOptions = legend.options,
|
|
|
309 |
horiz = this.horiz,
|
|
|
310 |
box,
|
|
|
311 |
width = pick(legendOptions.symbolWidth, horiz ? 200 : 12),
|
|
|
312 |
height = pick(legendOptions.symbolHeight, horiz ? 12 : 200),
|
|
|
313 |
labelPadding = pick(legendOptions.labelPadding, horiz ? 16 : 30),
|
|
|
314 |
itemDistance = pick(legendOptions.itemDistance, 10);
|
|
|
315 |
|
|
|
316 |
this.setLegendColor();
|
|
|
317 |
|
|
|
318 |
// Create the gradient
|
|
|
319 |
item.legendSymbol = this.chart.renderer.rect(
|
|
|
320 |
0,
|
|
|
321 |
legend.baseline - 11,
|
|
|
322 |
width,
|
|
|
323 |
height
|
|
|
324 |
).attr({
|
|
|
325 |
zIndex: 1
|
|
|
326 |
}).add(item.legendGroup);
|
|
|
327 |
box = item.legendSymbol.getBBox();
|
|
|
328 |
|
|
|
329 |
// Set how much space this legend item takes up
|
|
|
330 |
this.legendItemWidth = width + padding + (horiz ? itemDistance : labelPadding);
|
|
|
331 |
this.legendItemHeight = height + padding + (horiz ? labelPadding : 0);
|
|
|
332 |
},
|
|
|
333 |
/**
|
|
|
334 |
* Fool the legend
|
|
|
335 |
*/
|
|
|
336 |
setState: noop,
|
|
|
337 |
visible: true,
|
|
|
338 |
setVisible: noop,
|
|
|
339 |
getSeriesExtremes: function () {
|
|
|
340 |
var series;
|
|
|
341 |
if (this.series.length) {
|
|
|
342 |
series = this.series[0];
|
|
|
343 |
this.dataMin = series.valueMin;
|
|
|
344 |
this.dataMax = series.valueMax;
|
|
|
345 |
}
|
|
|
346 |
},
|
|
|
347 |
drawCrosshair: function (e, point) {
|
|
|
348 |
var plotX = point && point.plotX,
|
|
|
349 |
plotY = point && point.plotY,
|
|
|
350 |
crossPos,
|
|
|
351 |
axisPos = this.pos,
|
|
|
352 |
axisLen = this.len;
|
|
|
353 |
|
|
|
354 |
if (point) {
|
|
|
355 |
crossPos = this.toPixels(point[point.series.colorKey]);
|
|
|
356 |
if (crossPos < axisPos) {
|
|
|
357 |
crossPos = axisPos - 2;
|
|
|
358 |
} else if (crossPos > axisPos + axisLen) {
|
|
|
359 |
crossPos = axisPos + axisLen + 2;
|
|
|
360 |
}
|
|
|
361 |
|
|
|
362 |
point.plotX = crossPos;
|
|
|
363 |
point.plotY = this.len - crossPos;
|
|
|
364 |
Axis.prototype.drawCrosshair.call(this, e, point);
|
|
|
365 |
point.plotX = plotX;
|
|
|
366 |
point.plotY = plotY;
|
|
|
367 |
|
|
|
368 |
if (this.cross) {
|
|
|
369 |
this.cross
|
|
|
370 |
.attr({
|
|
|
371 |
fill: this.crosshair.color
|
|
|
372 |
})
|
|
|
373 |
.add(this.legendGroup);
|
|
|
374 |
}
|
|
|
375 |
}
|
|
|
376 |
},
|
|
|
377 |
getPlotLinePath: function (a, b, c, d, pos) {
|
|
|
378 |
if (typeof pos === 'number') { // crosshairs only // #3969 pos can be 0 !!
|
|
|
379 |
return this.horiz ?
|
|
|
380 |
['M', pos - 4, this.top - 6, 'L', pos + 4, this.top - 6, pos, this.top, 'Z'] :
|
|
|
381 |
['M', this.left, pos, 'L', this.left - 6, pos + 6, this.left - 6, pos - 6, 'Z'];
|
|
|
382 |
} else {
|
|
|
383 |
return Axis.prototype.getPlotLinePath.call(this, a, b, c, d);
|
|
|
384 |
}
|
|
|
385 |
},
|
|
|
386 |
|
|
|
387 |
update: function (newOptions, redraw) {
|
|
|
388 |
var chart = this.chart,
|
|
|
389 |
legend = chart.legend;
|
|
|
390 |
|
|
|
391 |
each(this.series, function (series) {
|
|
|
392 |
series.isDirtyData = true; // Needed for Axis.update when choropleth colors change
|
|
|
393 |
});
|
|
|
394 |
|
|
|
395 |
// When updating data classes, destroy old items and make sure new ones are created (#3207)
|
|
|
396 |
if (newOptions.dataClasses && legend.allItems) {
|
|
|
397 |
each(legend.allItems, function (item) {
|
|
|
398 |
if (item.isDataClass) {
|
|
|
399 |
item.legendGroup.destroy();
|
|
|
400 |
}
|
|
|
401 |
});
|
|
|
402 |
chart.isDirtyLegend = true;
|
|
|
403 |
}
|
|
|
404 |
|
|
|
405 |
// Keep the options structure updated for export. Unlike xAxis and yAxis, the colorAxis is
|
|
|
406 |
// not an array. (#3207)
|
|
|
407 |
chart.options[this.coll] = merge(this.userOptions, newOptions);
|
|
|
408 |
|
|
|
409 |
Axis.prototype.update.call(this, newOptions, redraw);
|
|
|
410 |
if (this.legendItem) {
|
|
|
411 |
this.setLegendColor();
|
|
|
412 |
legend.colorizeItem(this, true);
|
|
|
413 |
}
|
|
|
414 |
},
|
|
|
415 |
|
|
|
416 |
/**
|
|
|
417 |
* Get the legend item symbols for data classes
|
|
|
418 |
*/
|
|
|
419 |
getDataClassLegendSymbols: function () {
|
|
|
420 |
var axis = this,
|
|
|
421 |
chart = this.chart,
|
|
|
422 |
legendItems = this.legendItems,
|
|
|
423 |
legendOptions = chart.options.legend,
|
|
|
424 |
valueDecimals = legendOptions.valueDecimals,
|
|
|
425 |
valueSuffix = legendOptions.valueSuffix || '',
|
|
|
426 |
name;
|
|
|
427 |
|
|
|
428 |
if (!legendItems.length) {
|
|
|
429 |
each(this.dataClasses, function (dataClass, i) {
|
|
|
430 |
var vis = true,
|
|
|
431 |
from = dataClass.from,
|
|
|
432 |
to = dataClass.to;
|
|
|
433 |
|
|
|
434 |
// Assemble the default name. This can be overridden by legend.options.labelFormatter
|
|
|
435 |
name = '';
|
|
|
436 |
if (from === UNDEFINED) {
|
|
|
437 |
name = '< ';
|
|
|
438 |
} else if (to === UNDEFINED) {
|
|
|
439 |
name = '> ';
|
|
|
440 |
}
|
|
|
441 |
if (from !== UNDEFINED) {
|
|
|
442 |
name += Highcharts.numberFormat(from, valueDecimals) + valueSuffix;
|
|
|
443 |
}
|
|
|
444 |
if (from !== UNDEFINED && to !== UNDEFINED) {
|
|
|
445 |
name += ' - ';
|
|
|
446 |
}
|
|
|
447 |
if (to !== UNDEFINED) {
|
|
|
448 |
name += Highcharts.numberFormat(to, valueDecimals) + valueSuffix;
|
|
|
449 |
}
|
|
|
450 |
|
|
|
451 |
// Add a mock object to the legend items
|
|
|
452 |
legendItems.push(extend({
|
|
|
453 |
chart: chart,
|
|
|
454 |
name: name,
|
|
|
455 |
options: {},
|
|
|
456 |
drawLegendSymbol: LegendSymbolMixin.drawRectangle,
|
|
|
457 |
visible: true,
|
|
|
458 |
setState: noop,
|
|
|
459 |
isDataClass: true,
|
|
|
460 |
setVisible: function () {
|
|
|
461 |
vis = this.visible = !vis;
|
|
|
462 |
each(axis.series, function (series) {
|
|
|
463 |
each(series.points, function (point) {
|
|
|
464 |
if (point.dataClass === i) {
|
|
|
465 |
point.setVisible(vis);
|
|
|
466 |
}
|
|
|
467 |
});
|
|
|
468 |
});
|
|
|
469 |
|
|
|
470 |
chart.legend.colorizeItem(this, vis);
|
|
|
471 |
}
|
|
|
472 |
}, dataClass));
|
|
|
473 |
});
|
|
|
474 |
}
|
|
|
475 |
return legendItems;
|
|
|
476 |
},
|
|
|
477 |
name: '' // Prevents 'undefined' in legend in IE8
|
|
|
478 |
});
|
|
|
479 |
|
|
|
480 |
/**
|
|
|
481 |
* Handle animation of the color attributes directly
|
|
|
482 |
*/
|
|
|
483 |
each(['fill', 'stroke'], function (prop) {
|
|
|
484 |
HighchartsAdapter.addAnimSetter(prop, function (fx) {
|
|
|
485 |
fx.elem.attr(prop, ColorAxis.prototype.tweenColors(Color(fx.start), Color(fx.end), fx.pos));
|
|
|
486 |
});
|
|
|
487 |
});
|
|
|
488 |
|
|
|
489 |
/**
|
|
|
490 |
* Extend the chart getAxes method to also get the color axis
|
|
|
491 |
*/
|
|
|
492 |
wrap(Chart.prototype, 'getAxes', function (proceed) {
|
|
|
493 |
|
|
|
494 |
var options = this.options,
|
|
|
495 |
colorAxisOptions = options.colorAxis;
|
|
|
496 |
|
|
|
497 |
proceed.call(this);
|
|
|
498 |
|
|
|
499 |
this.colorAxis = [];
|
|
|
500 |
if (colorAxisOptions) {
|
|
|
501 |
proceed = new ColorAxis(this, colorAxisOptions); // Fake assignment for jsLint
|
|
|
502 |
}
|
|
|
503 |
});
|
|
|
504 |
|
|
|
505 |
|
|
|
506 |
/**
|
|
|
507 |
* Wrap the legend getAllItems method to add the color axis. This also removes the
|
|
|
508 |
* axis' own series to prevent them from showing up individually.
|
|
|
509 |
*/
|
|
|
510 |
wrap(Legend.prototype, 'getAllItems', function (proceed) {
|
|
|
511 |
var allItems = [],
|
|
|
512 |
colorAxis = this.chart.colorAxis[0];
|
|
|
513 |
|
|
|
514 |
if (colorAxis) {
|
|
|
515 |
|
|
|
516 |
// Data classes
|
|
|
517 |
if (colorAxis.options.dataClasses) {
|
|
|
518 |
allItems = allItems.concat(colorAxis.getDataClassLegendSymbols());
|
|
|
519 |
// Gradient legend
|
|
|
520 |
} else {
|
|
|
521 |
// Add this axis on top
|
|
|
522 |
allItems.push(colorAxis);
|
|
|
523 |
}
|
|
|
524 |
|
|
|
525 |
// Don't add the color axis' series
|
|
|
526 |
each(colorAxis.series, function (series) {
|
|
|
527 |
series.options.showInLegend = false;
|
|
|
528 |
});
|
|
|
529 |
}
|
|
|
530 |
|
|
|
531 |
return allItems.concat(proceed.call(this));
|
|
|
532 |
});/**
|
|
|
533 |
* Mixin for maps and heatmaps
|
|
|
534 |
*/
|
|
|
535 |
var colorPointMixin = {
|
|
|
536 |
/**
|
|
|
537 |
* Set the visibility of a single point
|
|
|
538 |
*/
|
|
|
539 |
setVisible: function (vis) {
|
|
|
540 |
var point = this,
|
|
|
541 |
method = vis ? 'show' : 'hide';
|
|
|
542 |
|
|
|
543 |
// Show and hide associated elements
|
|
|
544 |
each(['graphic', 'dataLabel'], function (key) {
|
|
|
545 |
if (point[key]) {
|
|
|
546 |
point[key][method]();
|
|
|
547 |
}
|
|
|
548 |
});
|
|
|
549 |
}
|
|
|
550 |
};
|
|
|
551 |
var colorSeriesMixin = {
|
|
|
552 |
|
|
|
553 |
pointAttrToOptions: { // mapping between SVG attributes and the corresponding options
|
|
|
554 |
stroke: 'borderColor',
|
|
|
555 |
'stroke-width': 'borderWidth',
|
|
|
556 |
fill: 'color',
|
|
|
557 |
dashstyle: 'dashStyle'
|
|
|
558 |
},
|
|
|
559 |
pointArrayMap: ['value'],
|
|
|
560 |
axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
|
|
|
561 |
optionalAxis: 'colorAxis',
|
|
|
562 |
trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
|
|
|
563 |
getSymbol: noop,
|
|
|
564 |
parallelArrays: ['x', 'y', 'value'],
|
|
|
565 |
colorKey: 'value',
|
|
|
566 |
|
|
|
567 |
/**
|
|
|
568 |
* In choropleth maps, the color is a result of the value, so this needs translation too
|
|
|
569 |
*/
|
|
|
570 |
translateColors: function () {
|
|
|
571 |
var series = this,
|
|
|
572 |
nullColor = this.options.nullColor,
|
|
|
573 |
colorAxis = this.colorAxis,
|
|
|
574 |
colorKey = this.colorKey;
|
|
|
575 |
|
|
|
576 |
each(this.data, function (point) {
|
|
|
577 |
var value = point[colorKey],
|
|
|
578 |
color;
|
|
|
579 |
|
|
|
580 |
color = point.options.color ||
|
|
|
581 |
(value === null ? nullColor : (colorAxis && value !== undefined) ? colorAxis.toColor(value, point) : point.color || series.color);
|
|
|
582 |
|
|
|
583 |
if (color) {
|
|
|
584 |
point.color = color;
|
|
|
585 |
}
|
|
|
586 |
});
|
|
|
587 |
}
|
|
|
588 |
};
|
|
|
589 |
/**
|
|
|
590 |
* Extend the default options with map options
|
|
|
591 |
*/
|
|
|
592 |
defaultOptions.plotOptions.heatmap = merge(defaultOptions.plotOptions.scatter, {
|
|
|
593 |
animation: false,
|
|
|
594 |
borderWidth: 0,
|
|
|
595 |
nullColor: '#F8F8F8',
|
|
|
596 |
dataLabels: {
|
|
|
597 |
formatter: function () { // #2945
|
|
|
598 |
return this.point.value;
|
|
|
599 |
},
|
|
|
600 |
inside: true,
|
|
|
601 |
verticalAlign: 'middle',
|
|
|
602 |
crop: false,
|
|
|
603 |
overflow: false,
|
|
|
604 |
padding: 0 // #3837
|
|
|
605 |
},
|
|
|
606 |
marker: null,
|
|
|
607 |
pointRange: null, // dynamically set to colsize by default
|
|
|
608 |
tooltip: {
|
|
|
609 |
pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
|
|
|
610 |
},
|
|
|
611 |
states: {
|
|
|
612 |
normal: {
|
|
|
613 |
animation: true
|
|
|
614 |
},
|
|
|
615 |
hover: {
|
|
|
616 |
halo: false, // #3406, halo is not required on heatmaps
|
|
|
617 |
brightness: 0.2
|
|
|
618 |
}
|
|
|
619 |
}
|
|
|
620 |
});
|
|
|
621 |
|
|
|
622 |
// The Heatmap series type
|
|
|
623 |
seriesTypes.heatmap = extendClass(seriesTypes.scatter, merge(colorSeriesMixin, {
|
|
|
624 |
type: 'heatmap',
|
|
|
625 |
pointArrayMap: ['y', 'value'],
|
|
|
626 |
hasPointSpecificOptions: true,
|
|
|
627 |
pointClass: extendClass(Point, colorPointMixin),
|
|
|
628 |
supportsDrilldown: true,
|
|
|
629 |
getExtremesFromAll: true,
|
|
|
630 |
directTouch: true,
|
|
|
631 |
|
|
|
632 |
/**
|
|
|
633 |
* Override the init method to add point ranges on both axes.
|
|
|
634 |
*/
|
|
|
635 |
init: function () {
|
|
|
636 |
var options;
|
|
|
637 |
seriesTypes.scatter.prototype.init.apply(this, arguments);
|
|
|
638 |
|
|
|
639 |
options = this.options;
|
|
|
640 |
this.pointRange = options.pointRange = pick(options.pointRange, options.colsize || 1); // #3758, prevent resetting in setData
|
|
|
641 |
this.yAxis.axisPointRange = options.rowsize || 1; // general point range
|
|
|
642 |
},
|
|
|
643 |
translate: function () {
|
|
|
644 |
var series = this,
|
|
|
645 |
options = series.options,
|
|
|
646 |
xAxis = series.xAxis,
|
|
|
647 |
yAxis = series.yAxis;
|
|
|
648 |
|
|
|
649 |
series.generatePoints();
|
|
|
650 |
|
|
|
651 |
each(series.points, function (point) {
|
|
|
652 |
var xPad = (options.colsize || 1) / 2,
|
|
|
653 |
yPad = (options.rowsize || 1) / 2,
|
|
|
654 |
x1 = Math.round(xAxis.len - xAxis.translate(point.x - xPad, 0, 1, 0, 1)),
|
|
|
655 |
x2 = Math.round(xAxis.len - xAxis.translate(point.x + xPad, 0, 1, 0, 1)),
|
|
|
656 |
y1 = Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
|
|
|
657 |
y2 = Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1));
|
|
|
658 |
|
|
|
659 |
// Set plotX and plotY for use in K-D-Tree and more
|
|
|
660 |
point.plotX = point.clientX = (x1 + x2) / 2;
|
|
|
661 |
point.plotY = (y1 + y2) / 2;
|
|
|
662 |
|
|
|
663 |
point.shapeType = 'rect';
|
|
|
664 |
point.shapeArgs = {
|
|
|
665 |
x: Math.min(x1, x2),
|
|
|
666 |
y: Math.min(y1, y2),
|
|
|
667 |
width: Math.abs(x2 - x1),
|
|
|
668 |
height: Math.abs(y2 - y1)
|
|
|
669 |
};
|
|
|
670 |
});
|
|
|
671 |
|
|
|
672 |
series.translateColors();
|
|
|
673 |
|
|
|
674 |
// Make sure colors are updated on colorAxis update (#2893)
|
|
|
675 |
if (this.chart.hasRendered) {
|
|
|
676 |
each(series.points, function (point) {
|
|
|
677 |
point.shapeArgs.fill = point.options.color || point.color; // #3311
|
|
|
678 |
});
|
|
|
679 |
}
|
|
|
680 |
},
|
|
|
681 |
drawPoints: seriesTypes.column.prototype.drawPoints,
|
|
|
682 |
animate: noop,
|
|
|
683 |
getBox: noop,
|
|
|
684 |
drawLegendSymbol: LegendSymbolMixin.drawRectangle,
|
|
|
685 |
|
|
|
686 |
getExtremes: function () {
|
|
|
687 |
// Get the extremes from the value data
|
|
|
688 |
Series.prototype.getExtremes.call(this, this.valueData);
|
|
|
689 |
this.valueMin = this.dataMin;
|
|
|
690 |
this.valueMax = this.dataMax;
|
|
|
691 |
|
|
|
692 |
// Get the extremes from the y data
|
|
|
693 |
Series.prototype.getExtremes.call(this);
|
|
|
694 |
}
|
|
|
695 |
|
|
|
696 |
}));
|
|
|
697 |
|
|
|
698 |
|
|
|
699 |
}(Highcharts));
|