cylinder.src.js 11 KB

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