cylinder.src.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319
  1. /* *
  2. *
  3. * Highcharts cylinder - a 3D series
  4. *
  5. * (c) 2010-2019 Highsoft AS
  6. *
  7. * Author: Kacper Madej
  8. *
  9. * License: www.highcharts.com/license
  10. *
  11. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  12. *
  13. * */
  14. 'use strict';
  15. import H from '../parts/Globals.js';
  16. import U from '../parts/Utilities.js';
  17. var pick = U.pick;
  18. import '../parts/ColumnSeries.js';
  19. import '../parts/SvgRenderer.js';
  20. var charts = H.charts, color = H.color, deg2rad = H.deg2rad, perspective = H.perspective, seriesType = H.seriesType,
  21. // Work on H.Renderer instead of H.SVGRenderer for VML support.
  22. RendererProto = H.Renderer.prototype, cuboidPath = RendererProto.cuboidPath, cylinderMethods;
  23. /**
  24. * The cylinder series type.
  25. *
  26. * @requires module:highcharts-3d
  27. * @requires module:modules/cylinder
  28. *
  29. * @private
  30. * @class
  31. * @name Highcharts.seriesTypes.cylinder
  32. *
  33. * @augments Highcharts.Series
  34. */
  35. seriesType('cylinder', 'column',
  36. /**
  37. * A cylinder graph is a variation of a 3d column graph. The cylinder graph
  38. * features cylindrical points.
  39. *
  40. * @sample {highcharts} highcharts/demo/cylinder/
  41. * Cylinder graph
  42. *
  43. * @extends plotOptions.column
  44. * @since 7.0.0
  45. * @product highcharts
  46. * @excluding allAreas, boostThreshold, colorAxis, compare, compareBase,
  47. * dragDrop
  48. * @requires modules/cylinder
  49. * @optionparent plotOptions.cylinder
  50. */
  51. {}, {},
  52. /** @lends Highcharts.seriesTypes.cylinder#pointClass# */
  53. {
  54. shapeType: 'cylinder',
  55. hasNewShapeType: H
  56. .seriesTypes.column.prototype
  57. .pointClass.prototype
  58. .hasNewShapeType
  59. });
  60. /**
  61. * A `cylinder` series. If the [type](#series.cylinder.type) option is not
  62. * specified, it is inherited from [chart.type](#chart.type).
  63. *
  64. * @extends series,plotOptions.cylinder
  65. * @since 7.0.0
  66. * @product highcharts
  67. * @excluding allAreas, boostThreshold, colorAxis, compare, compareBase
  68. * @requires modules/cylinder
  69. * @apioption series.cylinder
  70. */
  71. /**
  72. * An array of data points for the series. For the `cylinder` series type,
  73. * points can be given in the following ways:
  74. *
  75. * 1. An array of numerical values. In this case, the numerical values will be
  76. * interpreted as `y` options. The `x` values will be automatically
  77. * calculated, either starting at 0 and incremented by 1, or from
  78. * `pointStart` and `pointInterval` given in the series options. If the axis
  79. * has categories, these will be used. Example:
  80. * ```js
  81. * data: [0, 5, 3, 5]
  82. * ```
  83. *
  84. * 2. An array of arrays with 2 values. In this case, the values correspond to
  85. * `x,y`. If the first value is a string, it is applied as the name of the
  86. * point, and the `x` value is inferred.
  87. * ```js
  88. * data: [
  89. * [0, 0],
  90. * [1, 8],
  91. * [2, 9]
  92. * ]
  93. * ```
  94. *
  95. * 3. An array of objects with named values. The following snippet shows only a
  96. * few settings, see the complete options set below. If the total number of
  97. * data points exceeds the series'
  98. * [turboThreshold](#series.cylinder.turboThreshold), this option is not
  99. * available.
  100. *
  101. * ```js
  102. * data: [{
  103. * x: 1,
  104. * y: 2,
  105. * name: "Point2",
  106. * color: "#00FF00"
  107. * }, {
  108. * x: 1,
  109. * y: 4,
  110. * name: "Point1",
  111. * color: "#FF00FF"
  112. * }]
  113. * ```
  114. *
  115. * @sample {highcharts} highcharts/chart/reflow-true/
  116. * Numerical values
  117. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  118. * Arrays of numeric x and y
  119. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  120. * Arrays of datetime x and y
  121. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  122. * Arrays of point.name and y
  123. * @sample {highcharts} highcharts/series/data-array-of-objects/
  124. * Config objects
  125. *
  126. * @type {Array<number|Array<(number|string),(number|null)>|null|*>}
  127. * @extends series.column.data
  128. * @product highcharts highstock
  129. * @apioption series.cylinder.data
  130. */
  131. // cylinder extends cuboid
  132. cylinderMethods = H.merge(RendererProto.elements3d.cuboid, {
  133. parts: ['top', 'bottom', 'front', 'back'],
  134. pathType: 'cylinder',
  135. fillSetter: function (fill) {
  136. this.singleSetterForParts('fill', null, {
  137. front: fill,
  138. back: fill,
  139. top: color(fill).brighten(0.1).get(),
  140. bottom: color(fill).brighten(-0.1).get()
  141. });
  142. // fill for animation getter (#6776)
  143. this.color = this.fill = fill;
  144. return this;
  145. }
  146. });
  147. RendererProto.elements3d.cylinder = cylinderMethods;
  148. RendererProto.cylinder = function (shapeArgs) {
  149. return this.element3d('cylinder', shapeArgs);
  150. };
  151. // Generates paths and zIndexes.
  152. RendererProto.cylinderPath = function (shapeArgs) {
  153. var renderer = this, chart = charts[renderer.chartIndex],
  154. // decide zIndexes of parts based on cubiod logic, for consistency.
  155. cuboidData = cuboidPath.call(renderer, shapeArgs), isTopFirst = !cuboidData.isTop, isFronFirst = !cuboidData.isFront, top = renderer.getCylinderEnd(chart, shapeArgs), bottom = renderer.getCylinderEnd(chart, shapeArgs, true);
  156. return {
  157. front: renderer.getCylinderFront(top, bottom),
  158. back: renderer.getCylinderBack(top, bottom),
  159. top: top,
  160. bottom: bottom,
  161. zIndexes: {
  162. top: isTopFirst ? 3 : 0,
  163. bottom: isTopFirst ? 0 : 3,
  164. front: isFronFirst ? 2 : 1,
  165. back: isFronFirst ? 1 : 2,
  166. group: cuboidData.zIndexes.group
  167. }
  168. };
  169. };
  170. // Returns cylinder Front path
  171. RendererProto.getCylinderFront = function (topPath, bottomPath) {
  172. var path = topPath.slice(0, topPath.simplified ? 9 : 17);
  173. path.push('L');
  174. if (bottomPath.simplified) {
  175. path = path
  176. .concat(bottomPath.slice(7, 9))
  177. .concat(bottomPath.slice(3, 6))
  178. .concat(bottomPath.slice(0, 3));
  179. // change 'M' into 'L'
  180. path[path.length - 3] = 'L';
  181. }
  182. else {
  183. path.push(bottomPath[15], bottomPath[16], 'C', bottomPath[13], bottomPath[14], bottomPath[11], bottomPath[12], bottomPath[8], bottomPath[9], 'C', bottomPath[6], bottomPath[7], bottomPath[4], bottomPath[5], bottomPath[1], bottomPath[2]);
  184. }
  185. path.push('Z');
  186. return path;
  187. };
  188. // Returns cylinder Back path
  189. RendererProto.getCylinderBack = function (topPath, bottomPath) {
  190. var path = ['M'];
  191. if (topPath.simplified) {
  192. path = path.concat(topPath.slice(7, 12));
  193. // end at start
  194. path.push('L', topPath[1], topPath[2]);
  195. }
  196. else {
  197. path = path.concat(topPath.slice(15));
  198. }
  199. path.push('L');
  200. if (bottomPath.simplified) {
  201. path = path
  202. .concat(bottomPath.slice(1, 3))
  203. .concat(bottomPath.slice(9, 12))
  204. .concat(bottomPath.slice(6, 9));
  205. }
  206. else {
  207. path.push(bottomPath[29], bottomPath[30], 'C', bottomPath[27], bottomPath[28], bottomPath[25], bottomPath[26], bottomPath[22], bottomPath[23], 'C', bottomPath[20], bottomPath[21], bottomPath[18], bottomPath[19], bottomPath[15], bottomPath[16]);
  208. }
  209. path.push('Z');
  210. return path;
  211. };
  212. // Retruns cylinder path for top or bottom
  213. RendererProto.getCylinderEnd = function (chart, shapeArgs, isBottom) {
  214. // A half of the smaller one out of width or depth (optional, because
  215. // there's no depth for a funnel that reuses the code)
  216. var depth = pick(shapeArgs.depth, shapeArgs.width), radius = Math.min(shapeArgs.width, depth) / 2,
  217. // Approximated longest diameter
  218. angleOffset = deg2rad * (chart.options.chart.options3d.beta - 90 +
  219. (shapeArgs.alphaCorrection || 0)),
  220. // Could be top or bottom of the cylinder
  221. y = shapeArgs.y + (isBottom ? shapeArgs.height : 0),
  222. // Use cubic Bezier curve to draw a cricle in x,z (y is constant).
  223. // More math. at spencermortensen.com/articles/bezier-circle/
  224. c = 0.5519 * radius, centerX = shapeArgs.width / 2 + shapeArgs.x, centerZ = depth / 2 + shapeArgs.z,
  225. // points could be generated in a loop, but readability will plummet
  226. points = [{
  227. x: 0,
  228. y: y,
  229. z: radius
  230. }, {
  231. x: c,
  232. y: y,
  233. z: radius
  234. }, {
  235. x: radius,
  236. y: y,
  237. z: c
  238. }, {
  239. x: radius,
  240. y: y,
  241. z: 0
  242. }, {
  243. x: radius,
  244. y: y,
  245. z: -c
  246. }, {
  247. x: c,
  248. y: y,
  249. z: -radius
  250. }, {
  251. x: 0,
  252. y: y,
  253. z: -radius
  254. }, {
  255. x: -c,
  256. y: y,
  257. z: -radius
  258. }, {
  259. x: -radius,
  260. y: y,
  261. z: -c
  262. }, {
  263. x: -radius,
  264. y: y,
  265. z: 0
  266. }, {
  267. x: -radius,
  268. y: y,
  269. z: c
  270. }, {
  271. x: -c,
  272. y: y,
  273. z: radius
  274. }, {
  275. x: 0,
  276. y: y,
  277. z: radius
  278. }], cosTheta = Math.cos(angleOffset), sinTheta = Math.sin(angleOffset), perspectivePoints, path, x, z;
  279. // rotete to match chart's beta and translate to the shape center
  280. points.forEach(function (point, i) {
  281. x = point.x;
  282. z = point.z;
  283. // x′ = (x * cosθ − z * sinθ) + centerX
  284. // z′ = (z * cosθ + x * sinθ) + centerZ
  285. points[i].x = (x * cosTheta - z * sinTheta) + centerX;
  286. points[i].z = (z * cosTheta + x * sinTheta) + centerZ;
  287. });
  288. perspectivePoints = perspective(points, chart, true);
  289. // check for sub-pixel curve issue, compare front and back edges
  290. if (Math.abs(perspectivePoints[3].y - perspectivePoints[9].y) < 2.5 &&
  291. Math.abs(perspectivePoints[0].y - perspectivePoints[6].y) < 2.5) {
  292. // use simplied shape
  293. path = this.toLinePath([
  294. perspectivePoints[0],
  295. perspectivePoints[3],
  296. perspectivePoints[6],
  297. perspectivePoints[9]
  298. ], true);
  299. path.simplified = true;
  300. }
  301. else {
  302. // or default curved path to imitate ellipse (2D circle)
  303. path = this.getCurvedPath(perspectivePoints);
  304. }
  305. return path;
  306. };
  307. // Returns curved path in format of:
  308. // [ M, x, y, ...[C, cp1x, cp2y, cp2x, cp2y, epx, epy]*n_times ]
  309. // (cp - control point, ep - end point)
  310. RendererProto.getCurvedPath = function (points) {
  311. var path = [
  312. 'M',
  313. points[0].x, points[0].y
  314. ], limit = points.length - 2, i;
  315. for (i = 1; i < limit; i += 3) {
  316. path.push('C', points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
  317. }
  318. return path;
  319. };