heatmap.src.js 16 KB

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