Column3DSeries.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435
  1. /* *
  2. *
  3. * (c) 2010-2020 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import H from '../Core/Globals.js';
  12. import Math3D from '../Extensions/Math3D.js';
  13. var perspective = Math3D.perspective;
  14. import StackItem from '../Extensions/Stacking.js';
  15. import U from '../Core/Utilities.js';
  16. var addEvent = U.addEvent, pick = U.pick, wrap = U.wrap;
  17. import '../Core/Series/Series.js';
  18. var Series = H.Series, seriesTypes = H.seriesTypes, svg = H.svg;
  19. /**
  20. * Depth of the columns in a 3D column chart.
  21. *
  22. * @type {number}
  23. * @default 25
  24. * @since 4.0
  25. * @product highcharts
  26. * @requires highcharts-3d
  27. * @apioption plotOptions.column.depth
  28. */
  29. /**
  30. * 3D columns only. The color of the edges. Similar to `borderColor`, except it
  31. * defaults to the same color as the column.
  32. *
  33. * @type {Highcharts.ColorString}
  34. * @product highcharts
  35. * @requires highcharts-3d
  36. * @apioption plotOptions.column.edgeColor
  37. */
  38. /**
  39. * 3D columns only. The width of the colored edges.
  40. *
  41. * @type {number}
  42. * @default 1
  43. * @product highcharts
  44. * @requires highcharts-3d
  45. * @apioption plotOptions.column.edgeWidth
  46. */
  47. /**
  48. * The spacing between columns on the Z Axis in a 3D chart.
  49. *
  50. * @type {number}
  51. * @default 1
  52. * @since 4.0
  53. * @product highcharts
  54. * @requires highcharts-3d
  55. * @apioption plotOptions.column.groupZPadding
  56. */
  57. /* eslint-disable no-invalid-this */
  58. /**
  59. * @private
  60. * @param {Highcharts.Chart} chart
  61. * Chart with stacks
  62. * @param {string} stacking
  63. * Stacking option
  64. * @return {Highcharts.Stack3dDictionary}
  65. */
  66. function retrieveStacks(chart, stacking) {
  67. var series = chart.series, stacks = {};
  68. var stackNumber, i = 1;
  69. series.forEach(function (s) {
  70. stackNumber = pick(s.options.stack, (stacking ? 0 : series.length - 1 - s.index)); // #3841, #4532
  71. if (!stacks[stackNumber]) {
  72. stacks[stackNumber] = { series: [s], position: i };
  73. i++;
  74. }
  75. else {
  76. stacks[stackNumber].series.push(s);
  77. }
  78. });
  79. stacks.totalStacks = i + 1;
  80. return stacks;
  81. }
  82. wrap(seriesTypes.column.prototype, 'translate', function (proceed) {
  83. proceed.apply(this, [].slice.call(arguments, 1));
  84. // Do not do this if the chart is not 3D
  85. if (this.chart.is3d()) {
  86. this.translate3dShapes();
  87. }
  88. });
  89. // Don't use justifyDataLabel when point is outsidePlot
  90. wrap(Series.prototype, 'justifyDataLabel', function (proceed) {
  91. return !(arguments[2].outside3dPlot) ?
  92. proceed.apply(this, [].slice.call(arguments, 1)) :
  93. false;
  94. });
  95. seriesTypes.column.prototype.translate3dPoints = function () { };
  96. seriesTypes.column.prototype.translate3dShapes = function () {
  97. var series = this, chart = series.chart, seriesOptions = series.options, depth = seriesOptions.depth, stack = seriesOptions.stacking ?
  98. (seriesOptions.stack || 0) :
  99. series.index, // #4743
  100. z = stack * (depth + (seriesOptions.groupZPadding || 1)), borderCrisp = series.borderWidth % 2 ? 0.5 : 0, point2dPos; // Position of point in 2D, used for 3D position calculation.
  101. if (chart.inverted && !series.yAxis.reversed) {
  102. borderCrisp *= -1;
  103. }
  104. if (seriesOptions.grouping !== false) {
  105. z = 0;
  106. }
  107. z += (seriesOptions.groupZPadding || 1);
  108. series.data.forEach(function (point) {
  109. // #7103 Reset outside3dPlot flag
  110. point.outside3dPlot = null;
  111. if (point.y !== null) {
  112. var shapeArgs = point.shapeArgs, tooltipPos = point.tooltipPos,
  113. // Array for final shapeArgs calculation.
  114. // We are checking two dimensions (x and y).
  115. dimensions = [['x', 'width'], ['y', 'height']], borderlessBase; // Crisped rects can have +/- 0.5 pixels offset.
  116. // #3131 We need to check if column is inside plotArea.
  117. dimensions.forEach(function (d) {
  118. borderlessBase = shapeArgs[d[0]] - borderCrisp;
  119. if (borderlessBase < 0) {
  120. // If borderLessBase is smaller than 0, it is needed to set
  121. // its value to 0 or 0.5 depending on borderWidth
  122. // borderWidth may be even or odd.
  123. shapeArgs[d[1]] +=
  124. shapeArgs[d[0]] + borderCrisp;
  125. shapeArgs[d[0]] = -borderCrisp;
  126. borderlessBase = 0;
  127. }
  128. if ((borderlessBase + shapeArgs[d[1]] >
  129. series[d[0] + 'Axis'].len) &&
  130. // Do not change height/width of column if 0 (#6708)
  131. shapeArgs[d[1]] !== 0) {
  132. shapeArgs[d[1]] =
  133. series[d[0] + 'Axis'].len -
  134. shapeArgs[d[0]];
  135. }
  136. if (
  137. // Do not remove columns with zero height/width.
  138. (shapeArgs[d[1]] !== 0) &&
  139. (shapeArgs[d[0]] >=
  140. series[d[0] + 'Axis'].len ||
  141. shapeArgs[d[0]] + shapeArgs[d[1]] <=
  142. borderCrisp)) {
  143. // Set args to 0 if column is outside the chart.
  144. for (var key in shapeArgs) { // eslint-disable-line guard-for-in
  145. shapeArgs[key] = 0;
  146. }
  147. // #7103 outside3dPlot flag is set on Points which are
  148. // currently outside of plot.
  149. point.outside3dPlot = true;
  150. }
  151. });
  152. // Change from 2d to 3d
  153. if (point.shapeType === 'rect') {
  154. point.shapeType = 'cuboid';
  155. }
  156. shapeArgs.z = z;
  157. shapeArgs.depth = depth;
  158. shapeArgs.insidePlotArea = true;
  159. // Point's position in 2D
  160. point2dPos = {
  161. x: shapeArgs.x + shapeArgs.width / 2,
  162. y: shapeArgs.y,
  163. z: z + depth / 2 // The center of column in Z dimension
  164. };
  165. // Recalculate point positions for inverted graphs
  166. if (chart.inverted) {
  167. point2dPos.x = shapeArgs.height;
  168. point2dPos.y = point.clientX;
  169. }
  170. // Calculate and store point's position in 3D,
  171. // using perspective method.
  172. point.plot3d = perspective([point2dPos], chart, true, false)[0];
  173. // Translate the tooltip position in 3d space
  174. tooltipPos = perspective([{
  175. x: tooltipPos[0],
  176. y: tooltipPos[1],
  177. z: z + depth / 2 // The center of column in Z dimension
  178. }], chart, true, false)[0];
  179. point.tooltipPos = [tooltipPos.x, tooltipPos.y];
  180. }
  181. });
  182. // store for later use #4067
  183. series.z = z;
  184. };
  185. wrap(seriesTypes.column.prototype, 'animate', function (proceed) {
  186. if (!this.chart.is3d()) {
  187. proceed.apply(this, [].slice.call(arguments, 1));
  188. }
  189. else {
  190. var args = arguments, init = args[1], yAxis = this.yAxis, series = this, reversed = this.yAxis.reversed;
  191. if (svg) { // VML is too slow anyway
  192. if (init) {
  193. series.data.forEach(function (point) {
  194. if (point.y !== null) {
  195. point.height = point.shapeArgs.height;
  196. point.shapey = point.shapeArgs.y; // #2968
  197. point.shapeArgs.height = 1;
  198. if (!reversed) {
  199. if (point.stackY) {
  200. point.shapeArgs.y =
  201. point.plotY +
  202. yAxis.translate(point.stackY);
  203. }
  204. else {
  205. point.shapeArgs.y =
  206. point.plotY +
  207. (point.negative ?
  208. -point.height :
  209. point.height);
  210. }
  211. }
  212. }
  213. });
  214. }
  215. else { // run the animation
  216. series.data.forEach(function (point) {
  217. if (point.y !== null) {
  218. point.shapeArgs.height = point.height;
  219. point.shapeArgs.y = point.shapey; // #2968
  220. // null value do not have a graphic
  221. if (point.graphic) {
  222. point.graphic.animate(point.shapeArgs, series.options.animation);
  223. }
  224. }
  225. });
  226. // redraw datalabels to the correct position
  227. this.drawDataLabels();
  228. }
  229. }
  230. }
  231. });
  232. // In case of 3d columns there is no sense to add this columns to a specific
  233. // series group - if series is added to a group all columns will have the same
  234. // zIndex in comparison with different series.
  235. wrap(seriesTypes.column.prototype, 'plotGroup', function (proceed, prop, name, visibility, zIndex, parent) {
  236. if (prop !== 'dataLabelsGroup') {
  237. if (this.chart.is3d()) {
  238. if (this[prop]) {
  239. delete this[prop];
  240. }
  241. if (parent) {
  242. if (!this.chart.columnGroup) {
  243. this.chart.columnGroup =
  244. this.chart.renderer.g('columnGroup').add(parent);
  245. }
  246. this[prop] = this.chart.columnGroup;
  247. this.chart.columnGroup.attr(this.getPlotBox());
  248. this[prop].survive = true;
  249. if (prop === 'group' || prop === 'markerGroup') {
  250. arguments[3] = 'visible';
  251. // For 3D column group and markerGroup should be visible
  252. }
  253. }
  254. }
  255. }
  256. return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  257. });
  258. // When series is not added to group it is needed to change setVisible method to
  259. // allow correct Legend funcionality. This wrap is basing on pie chart series.
  260. wrap(seriesTypes.column.prototype, 'setVisible', function (proceed, vis) {
  261. var series = this, pointVis;
  262. if (series.chart.is3d()) {
  263. series.data.forEach(function (point) {
  264. point.visible = point.options.visible = vis =
  265. typeof vis === 'undefined' ?
  266. !pick(series.visible, point.visible) : vis;
  267. pointVis = vis ? 'visible' : 'hidden';
  268. series.options.data[series.data.indexOf(point)] =
  269. point.options;
  270. if (point.graphic) {
  271. point.graphic.attr({
  272. visibility: pointVis
  273. });
  274. }
  275. });
  276. }
  277. proceed.apply(this, Array.prototype.slice.call(arguments, 1));
  278. });
  279. seriesTypes.column.prototype
  280. .handle3dGrouping = true;
  281. addEvent(Series, 'afterInit', function () {
  282. if (this.chart.is3d() &&
  283. this.handle3dGrouping) {
  284. var series = this, seriesOptions = this.options, grouping = seriesOptions.grouping, stacking = seriesOptions.stacking, reversedStacks = pick(this.yAxis.options.reversedStacks, true), z = 0;
  285. // @todo grouping === true ?
  286. if (!(typeof grouping !== 'undefined' && !grouping)) {
  287. var stacks = retrieveStacks(this.chart, stacking), stack = seriesOptions.stack || 0, i; // position within the stack
  288. for (i = 0; i < stacks[stack].series.length; i++) {
  289. if (stacks[stack].series[i] === this) {
  290. break;
  291. }
  292. }
  293. z = (10 * (stacks.totalStacks - stacks[stack].position)) +
  294. (reversedStacks ? i : -i); // #4369
  295. // In case when axis is reversed, columns are also reversed inside
  296. // the group (#3737)
  297. if (!this.xAxis.reversed) {
  298. z = (stacks.totalStacks * 10) - z;
  299. }
  300. }
  301. seriesOptions.depth = seriesOptions.depth || 25;
  302. series.z = series.z || 0;
  303. seriesOptions.zIndex = z;
  304. }
  305. });
  306. // eslint-disable-next-line valid-jsdoc
  307. /**
  308. * @private
  309. */
  310. function pointAttribs(proceed) {
  311. var attr = proceed.apply(this, [].slice.call(arguments, 1));
  312. if (this.chart.is3d && this.chart.is3d()) {
  313. // Set the fill color to the fill color to provide a smooth edge
  314. attr.stroke = this.options.edgeColor || attr.fill;
  315. attr['stroke-width'] = pick(this.options.edgeWidth, 1); // #4055
  316. }
  317. return attr;
  318. }
  319. // eslint-disable-next-line valid-jsdoc
  320. /**
  321. * In 3D mode, all column-series are rendered in one main group. Because of that
  322. * we need to apply inactive state on all points.
  323. * @private
  324. */
  325. function setState(proceed, state, inherit) {
  326. var is3d = this.chart.is3d && this.chart.is3d();
  327. if (is3d) {
  328. this.options.inactiveOtherPoints = true;
  329. }
  330. proceed.call(this, state, inherit);
  331. if (is3d) {
  332. this.options.inactiveOtherPoints = false;
  333. }
  334. }
  335. // eslint-disable-next-line valid-jsdoc
  336. /**
  337. * In 3D mode, simple checking for a new shape to animate is not enough.
  338. * Additionally check if graphic is a group of elements
  339. * @private
  340. */
  341. function hasNewShapeType(proceed) {
  342. var args = [];
  343. for (var _i = 1; _i < arguments.length; _i++) {
  344. args[_i - 1] = arguments[_i];
  345. }
  346. return this.series.chart.is3d() ?
  347. this.graphic && this.graphic.element.nodeName !== 'g' :
  348. proceed.apply(this, args);
  349. }
  350. wrap(seriesTypes.column.prototype, 'pointAttribs', pointAttribs);
  351. wrap(seriesTypes.column.prototype, 'setState', setState);
  352. wrap(seriesTypes.column.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
  353. if (seriesTypes.columnrange) {
  354. wrap(seriesTypes.columnrange.prototype, 'pointAttribs', pointAttribs);
  355. wrap(seriesTypes.columnrange.prototype, 'setState', setState);
  356. wrap(seriesTypes.columnrange.prototype.pointClass.prototype, 'hasNewShapeType', hasNewShapeType);
  357. seriesTypes.columnrange.prototype.plotGroup =
  358. seriesTypes.column.prototype.plotGroup;
  359. seriesTypes.columnrange.prototype.setVisible =
  360. seriesTypes.column.prototype.setVisible;
  361. }
  362. wrap(Series.prototype, 'alignDataLabel', function (proceed, point, dataLabel, options, alignTo) {
  363. var chart = this.chart;
  364. // In 3D we need to pass point.outsidePlot option to the justifyDataLabel
  365. // method for disabling justifying dataLabels in columns outside plot
  366. options.outside3dPlot = point.outside3dPlot;
  367. // Only do this for 3D columns and it's derived series
  368. if (chart.is3d() &&
  369. this.is('column')) {
  370. var series = this, seriesOptions = series.options, inside = pick(options.inside, !!series.options.stacking), options3d = chart.options.chart.options3d, xOffset = point.pointWidth / 2 || 0;
  371. var dLPosition = {
  372. x: alignTo.x + xOffset,
  373. y: alignTo.y,
  374. z: series.z + seriesOptions.depth / 2
  375. };
  376. if (chart.inverted) {
  377. // Inside dataLabels are positioned according to above
  378. // logic and there is no need to position them using
  379. // non-3D algorighm (that use alignTo.width)
  380. if (inside) {
  381. alignTo.width = 0;
  382. dLPosition.x += point.shapeArgs.height / 2;
  383. }
  384. // When chart is upside down
  385. // (alpha angle between 180 and 360 degrees)
  386. // it is needed to add column width to calculated value.
  387. if (options3d.alpha >= 90 && options3d.alpha <= 270) {
  388. dLPosition.y += point.shapeArgs.width;
  389. }
  390. }
  391. // dLPosition is recalculated for 3D graphs
  392. dLPosition = perspective([dLPosition], chart, true, false)[0];
  393. alignTo.x = dLPosition.x - xOffset;
  394. // #7103 If point is outside of plotArea, hide data label.
  395. alignTo.y = point.outside3dPlot ? -9e9 : dLPosition.y;
  396. }
  397. proceed.apply(this, [].slice.call(arguments, 1));
  398. });
  399. // Added stackLabels position calculation for 3D charts.
  400. wrap(StackItem.prototype, 'getStackBox', function (proceed, chart, stackItem, x, y, xWidth, h, axis) {
  401. var stackBox = proceed.apply(this, [].slice.call(arguments, 1));
  402. // Only do this for 3D graph
  403. if (chart.is3d() && stackItem.base) {
  404. // First element of stackItem.base is an index of base series.
  405. var baseSeriesInd = +(stackItem.base).split(',')[0];
  406. var columnSeries = chart.series[baseSeriesInd];
  407. var options3d = chart.options.chart.options3d;
  408. // Only do this if base series is a column or inherited type,
  409. // use its barW, z and depth parameters
  410. // for correct stackLabels position calculation
  411. if (columnSeries &&
  412. columnSeries instanceof seriesTypes.column) {
  413. var dLPosition = {
  414. x: stackBox.x + (chart.inverted ? h : xWidth / 2),
  415. y: stackBox.y,
  416. z: columnSeries.options.depth / 2
  417. };
  418. if (chart.inverted) {
  419. // Do not use default offset calculation logic
  420. // for 3D inverted stackLabels.
  421. stackBox.width = 0;
  422. // When chart is upside down
  423. // (alpha angle between 180 and 360 degrees)
  424. // it is needed to add column width to calculated value.
  425. if (options3d.alpha >= 90 && options3d.alpha <= 270) {
  426. dLPosition.y += xWidth;
  427. }
  428. }
  429. dLPosition = perspective([dLPosition], chart, true, false)[0];
  430. stackBox.x = dLPosition.x - xWidth / 2;
  431. stackBox.y = dLPosition.y;
  432. }
  433. }
  434. return stackBox;
  435. });