7800acdcb7b906a90df359a01f707eb47be2ae1f.svn-base 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680
  1. /**
  2. * @license Highcharts JS v4.1.7 (2015-06-26)
  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. var chart = this.chart,
  340. legend = chart.legend;
  341. each(this.series, function (series) {
  342. series.isDirtyData = true; // Needed for Axis.update when choropleth colors change
  343. });
  344. // When updating data classes, destroy old items and make sure new ones are created (#3207)
  345. if (newOptions.dataClasses) {
  346. each(legend.allItems, function (item) {
  347. if (item.isDataClass) {
  348. item.legendGroup.destroy();
  349. }
  350. });
  351. chart.isDirtyLegend = true;
  352. }
  353. // Keep the options structure updated for export. Unlike xAxis and yAxis, the colorAxis is
  354. // not an array. (#3207)
  355. chart.options[this.coll] = merge(this.userOptions, newOptions);
  356. Axis.prototype.update.call(this, newOptions, redraw);
  357. if (this.legendItem) {
  358. this.setLegendColor();
  359. legend.colorizeItem(this, true);
  360. }
  361. },
  362. /**
  363. * Get the legend item symbols for data classes
  364. */
  365. getDataClassLegendSymbols: function () {
  366. var axis = this,
  367. chart = this.chart,
  368. legendItems = this.legendItems,
  369. legendOptions = chart.options.legend,
  370. valueDecimals = legendOptions.valueDecimals,
  371. valueSuffix = legendOptions.valueSuffix || '',
  372. name;
  373. if (!legendItems.length) {
  374. each(this.dataClasses, function (dataClass, i) {
  375. var vis = true,
  376. from = dataClass.from,
  377. to = dataClass.to;
  378. // Assemble the default name. This can be overridden by legend.options.labelFormatter
  379. name = '';
  380. if (from === UNDEFINED) {
  381. name = '< ';
  382. } else if (to === UNDEFINED) {
  383. name = '> ';
  384. }
  385. if (from !== UNDEFINED) {
  386. name += Highcharts.numberFormat(from, valueDecimals) + valueSuffix;
  387. }
  388. if (from !== UNDEFINED && to !== UNDEFINED) {
  389. name += ' - ';
  390. }
  391. if (to !== UNDEFINED) {
  392. name += Highcharts.numberFormat(to, valueDecimals) + valueSuffix;
  393. }
  394. // Add a mock object to the legend items
  395. legendItems.push(extend({
  396. chart: chart,
  397. name: name,
  398. options: {},
  399. drawLegendSymbol: LegendSymbolMixin.drawRectangle,
  400. visible: true,
  401. setState: noop,
  402. isDataClass: true,
  403. setVisible: function () {
  404. vis = this.visible = !vis;
  405. each(axis.series, function (series) {
  406. each(series.points, function (point) {
  407. if (point.dataClass === i) {
  408. point.setVisible(vis);
  409. }
  410. });
  411. });
  412. chart.legend.colorizeItem(this, vis);
  413. }
  414. }, dataClass));
  415. });
  416. }
  417. return legendItems;
  418. },
  419. name: '' // Prevents 'undefined' in legend in IE8
  420. });
  421. /**
  422. * Handle animation of the color attributes directly
  423. */
  424. each(['fill', 'stroke'], function (prop) {
  425. HighchartsAdapter.addAnimSetter(prop, function (fx) {
  426. fx.elem.attr(prop, ColorAxis.prototype.tweenColors(Color(fx.start), Color(fx.end), fx.pos));
  427. });
  428. });
  429. /**
  430. * Extend the chart getAxes method to also get the color axis
  431. */
  432. wrap(Chart.prototype, 'getAxes', function (proceed) {
  433. var options = this.options,
  434. colorAxisOptions = options.colorAxis;
  435. proceed.call(this);
  436. this.colorAxis = [];
  437. if (colorAxisOptions) {
  438. proceed = new ColorAxis(this, colorAxisOptions); // Fake assignment for jsLint
  439. }
  440. });
  441. /**
  442. * Wrap the legend getAllItems method to add the color axis. This also removes the
  443. * axis' own series to prevent them from showing up individually.
  444. */
  445. wrap(Legend.prototype, 'getAllItems', function (proceed) {
  446. var allItems = [],
  447. colorAxis = this.chart.colorAxis[0];
  448. if (colorAxis) {
  449. // Data classes
  450. if (colorAxis.options.dataClasses) {
  451. allItems = allItems.concat(colorAxis.getDataClassLegendSymbols());
  452. // Gradient legend
  453. } else {
  454. // Add this axis on top
  455. allItems.push(colorAxis);
  456. }
  457. // Don't add the color axis' series
  458. each(colorAxis.series, function (series) {
  459. series.options.showInLegend = false;
  460. });
  461. }
  462. return allItems.concat(proceed.call(this));
  463. });/**
  464. * Mixin for maps and heatmaps
  465. */
  466. var colorSeriesMixin = {
  467. pointAttrToOptions: { // mapping between SVG attributes and the corresponding options
  468. stroke: 'borderColor',
  469. 'stroke-width': 'borderWidth',
  470. fill: 'color',
  471. dashstyle: 'dashStyle'
  472. },
  473. pointArrayMap: ['value'],
  474. axisTypes: ['xAxis', 'yAxis', 'colorAxis'],
  475. optionalAxis: 'colorAxis',
  476. trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
  477. getSymbol: noop,
  478. parallelArrays: ['x', 'y', 'value'],
  479. colorKey: 'value',
  480. /**
  481. * In choropleth maps, the color is a result of the value, so this needs translation too
  482. */
  483. translateColors: function () {
  484. var series = this,
  485. nullColor = this.options.nullColor,
  486. colorAxis = this.colorAxis,
  487. colorKey = this.colorKey;
  488. each(this.data, function (point) {
  489. var value = point[colorKey],
  490. color;
  491. color = value === null ? nullColor : (colorAxis && value !== undefined) ? colorAxis.toColor(value, point) : point.color || series.color;
  492. if (color) {
  493. point.color = color;
  494. }
  495. });
  496. }
  497. };
  498. /**
  499. * Extend the default options with map options
  500. */
  501. defaultOptions.plotOptions.heatmap = merge(defaultOptions.plotOptions.scatter, {
  502. animation: false,
  503. borderWidth: 0,
  504. nullColor: '#F8F8F8',
  505. dataLabels: {
  506. formatter: function () { // #2945
  507. return this.point.value;
  508. },
  509. inside: true,
  510. verticalAlign: 'middle',
  511. crop: false,
  512. overflow: false,
  513. padding: 0 // #3837
  514. },
  515. marker: null,
  516. pointRange: null, // dynamically set to colsize by default
  517. tooltip: {
  518. pointFormat: '{point.x}, {point.y}: {point.value}<br/>'
  519. },
  520. states: {
  521. normal: {
  522. animation: true
  523. },
  524. hover: {
  525. halo: false, // #3406, halo is not required on heatmaps
  526. brightness: 0.2
  527. }
  528. }
  529. });
  530. // The Heatmap series type
  531. seriesTypes.heatmap = extendClass(seriesTypes.scatter, merge(colorSeriesMixin, {
  532. type: 'heatmap',
  533. pointArrayMap: ['y', 'value'],
  534. hasPointSpecificOptions: true,
  535. supportsDrilldown: true,
  536. getExtremesFromAll: true,
  537. directTouch: true,
  538. /**
  539. * Override the init method to add point ranges on both axes.
  540. */
  541. init: function () {
  542. var options;
  543. seriesTypes.scatter.prototype.init.apply(this, arguments);
  544. options = this.options;
  545. this.pointRange = options.pointRange = pick(options.pointRange, options.colsize || 1); // #3758, prevent resetting in setData
  546. this.yAxis.axisPointRange = options.rowsize || 1; // general point range
  547. },
  548. translate: function () {
  549. var series = this,
  550. options = series.options,
  551. xAxis = series.xAxis,
  552. yAxis = series.yAxis;
  553. series.generatePoints();
  554. each(series.points, function (point) {
  555. var xPad = (options.colsize || 1) / 2,
  556. yPad = (options.rowsize || 1) / 2,
  557. x1 = Math.round(xAxis.len - xAxis.translate(point.x - xPad, 0, 1, 0, 1)),
  558. x2 = Math.round(xAxis.len - xAxis.translate(point.x + xPad, 0, 1, 0, 1)),
  559. y1 = Math.round(yAxis.translate(point.y - yPad, 0, 1, 0, 1)),
  560. y2 = Math.round(yAxis.translate(point.y + yPad, 0, 1, 0, 1));
  561. // Set plotX and plotY for use in K-D-Tree and more
  562. point.plotX = point.clientX = (x1 + x2) / 2;
  563. point.plotY = (y1 + y2) / 2;
  564. point.shapeType = 'rect';
  565. point.shapeArgs = {
  566. x: Math.min(x1, x2),
  567. y: Math.min(y1, y2),
  568. width: Math.abs(x2 - x1),
  569. height: Math.abs(y2 - y1)
  570. };
  571. });
  572. series.translateColors();
  573. // Make sure colors are updated on colorAxis update (#2893)
  574. if (this.chart.hasRendered) {
  575. each(series.points, function (point) {
  576. point.shapeArgs.fill = point.options.color || point.color; // #3311
  577. });
  578. }
  579. },
  580. drawPoints: seriesTypes.column.prototype.drawPoints,
  581. animate: noop,
  582. getBox: noop,
  583. drawLegendSymbol: LegendSymbolMixin.drawRectangle,
  584. getExtremes: function () {
  585. // Get the extremes from the value data
  586. Series.prototype.getExtremes.call(this, this.valueData);
  587. this.valueMin = this.dataMin;
  588. this.valueMax = this.dataMax;
  589. // Get the extremes from the y data
  590. Series.prototype.getExtremes.call(this);
  591. }
  592. }));
  593. }(Highcharts));