variable-pie.src.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485
  1. /**
  2. * @license Highcharts JS v7.0.2 (2019-01-17)
  3. *
  4. * Variable Pie module for Highcharts
  5. *
  6. * (c) 2010-2019 Grzegorz Blachliński
  7. *
  8. * License: www.highcharts.com/license
  9. */
  10. 'use strict';
  11. (function (factory) {
  12. if (typeof module === 'object' && module.exports) {
  13. factory['default'] = factory;
  14. module.exports = factory;
  15. } else if (typeof define === 'function' && define.amd) {
  16. define(function () {
  17. return factory;
  18. });
  19. } else {
  20. factory(typeof Highcharts !== 'undefined' ? Highcharts : undefined);
  21. }
  22. }(function (Highcharts) {
  23. (function (H) {
  24. /* *
  25. * Variable Pie module for Highcharts
  26. *
  27. * (c) 2010-2017 Grzegorz Blachliński
  28. *
  29. * License: www.highcharts.com/license
  30. */
  31. var pick = H.pick,
  32. arrayMin = H.arrayMin,
  33. arrayMax = H.arrayMax,
  34. seriesType = H.seriesType,
  35. pieProto = H.seriesTypes.pie.prototype;
  36. /**
  37. * The variablepie series type.
  38. *
  39. * @private
  40. * @class
  41. * @name Highcharts.seriesTypes.variablepie
  42. *
  43. * @augments Highcharts.Series
  44. */
  45. seriesType(
  46. 'variablepie',
  47. 'pie',
  48. /**
  49. * A variable pie series is a two dimensional series type, where each point
  50. * renders an Y and Z value. Each point is drawn as a pie slice where the
  51. * size (arc) of the slice relates to the Y value and the radius of pie
  52. * slice relates to the Z value. Requires `highcharts-more.js`.
  53. *
  54. * @sample {highcharts} highcharts/demo/variable-radius-pie/
  55. * Variable-radius pie chart
  56. *
  57. * @extends plotOptions.pie
  58. * @since 6.0.0
  59. * @product highcharts
  60. * @optionparent plotOptions.variablepie
  61. */
  62. {
  63. /**
  64. * The minimum size of the points' radius related to chart's `plotArea`.
  65. * If a number is set, it applies in pixels.
  66. *
  67. * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
  68. * Example of minPointSize and maxPointSize
  69. * @sample {highcharts} highcharts/variable-radius-pie/min-point-size-100/
  70. * minPointSize set to 100
  71. *
  72. * @type {number|string}
  73. * @since 6.0.0
  74. */
  75. minPointSize: '10%',
  76. /**
  77. * The maximum size of the points' radius related to chart's `plotArea`.
  78. * If a number is set, it applies in pixels.
  79. *
  80. * @sample {highcharts} highcharts/variable-radius-pie/min-max-point-size/
  81. * Example of minPointSize and maxPointSize
  82. *
  83. * @type {number|string}
  84. * @since 6.0.0
  85. */
  86. maxPointSize: '100%',
  87. /**
  88. * The minimum possible z value for the point's radius calculation. If
  89. * the point's Z value is smaller than zMin, the slice will be drawn
  90. * according to the zMin value.
  91. *
  92. * @sample {highcharts} highcharts/variable-radius-pie/zmin-5/
  93. * zMin set to 5, smaller z values are treated as 5
  94. * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
  95. * Series limited by both zMin and zMax
  96. *
  97. * @type {number}
  98. * @since 6.0.0
  99. */
  100. zMin: undefined,
  101. /**
  102. * The maximum possible z value for the point's radius calculation. If
  103. * the point's Z value is bigger than zMax, the slice will be drawn
  104. * according to the zMax value
  105. *
  106. * @sample {highcharts} highcharts/variable-radius-pie/zmin-zmax/
  107. * Series limited by both zMin and zMax
  108. *
  109. * @type {number}
  110. * @since 6.0.0
  111. */
  112. zMax: undefined,
  113. /**
  114. * Whether the pie slice's value should be represented by the area or
  115. * the radius of the slice. Can be either `area` or `radius`. The
  116. * default, `area`, corresponds best to the human perception of the size
  117. * of each pie slice.
  118. *
  119. * @sample {highcharts} highcharts/variable-radius-pie/sizeby/
  120. * Difference between area and radius sizeBy
  121. *
  122. * @since 6.0.0
  123. * @validvalue ["area", "radius"]
  124. */
  125. sizeBy: 'area',
  126. tooltip: {
  127. pointFormat: '<span style="color:{point.color}">\u25CF</span> {series.name}<br/>Value: {point.y}<br/>Size: {point.z}<br/>'
  128. }
  129. }, {
  130. pointArrayMap: ['y', 'z'],
  131. parallelArrays: ['x', 'y', 'z'],
  132. // It is needed to null series.center on chart redraw. Probably good
  133. // idea will be to add this option in directly in pie series.
  134. redraw: function () {
  135. this.center = null;
  136. pieProto.redraw.call(this, arguments);
  137. },
  138. // For arrayMin and arrayMax calculations array shouldn't have
  139. // null/undefined/string values. In this case it is needed to check if
  140. // points Z value is a Number.
  141. zValEval: function (zVal) {
  142. if (typeof zVal === 'number' && !isNaN(zVal)) {
  143. return true;
  144. }
  145. return null;
  146. },
  147. // Before standard translate method for pie chart it is needed to
  148. // calculate min/max radius of each pie slice based on its Z value.
  149. calculateExtremes: function () {
  150. var series = this,
  151. chart = series.chart,
  152. plotWidth = chart.plotWidth,
  153. plotHeight = chart.plotHeight,
  154. seriesOptions = series.options,
  155. slicingRoom = 2 * (seriesOptions.slicedOffset || 0),
  156. zMin,
  157. zMax,
  158. zData = series.zData,
  159. smallestSize = Math.min(plotWidth, plotHeight) - slicingRoom,
  160. extremes = {}, // Min and max size of pie slice.
  161. // In pie charts size of a pie is changed to make space for
  162. // dataLabels, then series.center is changing.
  163. positions = series.center || series.getCenter();
  164. ['minPointSize', 'maxPointSize'].forEach(function (prop) {
  165. var length = seriesOptions[prop],
  166. isPercent = /%$/.test(length);
  167. length = parseInt(length, 10);
  168. extremes[prop] = isPercent ?
  169. smallestSize * length / 100 :
  170. length * 2; // Because it should be radius, not diameter.
  171. });
  172. series.minPxSize = positions[3] + extremes.minPointSize;
  173. series.maxPxSize = Math.max(
  174. Math.min(positions[2], extremes.maxPointSize),
  175. positions[3] + extremes.minPointSize
  176. );
  177. if (zData.length) {
  178. zMin = pick(
  179. seriesOptions.zMin,
  180. arrayMin(zData.filter(series.zValEval))
  181. );
  182. zMax = pick(
  183. seriesOptions.zMax,
  184. arrayMax(zData.filter(series.zValEval))
  185. );
  186. this.getRadii(zMin, zMax, series.minPxSize, series.maxPxSize);
  187. }
  188. },
  189. /**
  190. * Finding radius of series points based on their Z value and min/max Z
  191. * value for all series.
  192. *
  193. * @private
  194. * @function Highcharts.Series#getRadii
  195. *
  196. * @param {number} zMin
  197. * Min threshold for Z value. If point's Z value is smaller that
  198. * zMin, point will have the smallest possible radius.
  199. *
  200. * @param {number} zMax
  201. * Max threshold for Z value. If point's Z value is bigger that
  202. * zMax, point will have the biggest possible radius.
  203. *
  204. * @param {number} minSize
  205. * Minimal pixel size possible for radius.
  206. *
  207. * @param {numbner} maxSize
  208. * Minimal pixel size possible for radius.
  209. */
  210. getRadii: function (zMin, zMax, minSize, maxSize) {
  211. var i = 0,
  212. pos,
  213. zData = this.zData,
  214. len = zData.length,
  215. radii = [],
  216. options = this.options,
  217. sizeByArea = options.sizeBy !== 'radius',
  218. zRange = zMax - zMin,
  219. value,
  220. radius;
  221. // Calculate radius for all pie slice's based on their Z values
  222. for (i; i < len; i++) {
  223. // if zData[i] is null/undefined/string we need to take zMin for
  224. // smallest radius.
  225. value = this.zValEval(zData[i]) ? zData[i] : zMin;
  226. if (value <= zMin) {
  227. radius = minSize / 2;
  228. } else if (value >= zMax) {
  229. radius = maxSize / 2;
  230. } else {
  231. // Relative size, a number between 0 and 1
  232. pos = zRange > 0 ? (value - zMin) / zRange : 0.5;
  233. if (sizeByArea) {
  234. pos = Math.sqrt(pos);
  235. }
  236. radius = Math.ceil(minSize + pos * (maxSize - minSize)) / 2;
  237. }
  238. radii.push(radius);
  239. }
  240. this.radii = radii;
  241. },
  242. // Extend translate by updating radius for each pie slice instead of
  243. // using one global radius.
  244. translate: function (positions) {
  245. this.generatePoints();
  246. var series = this,
  247. cumulative = 0,
  248. precision = 1000, // issue #172
  249. options = series.options,
  250. slicedOffset = options.slicedOffset,
  251. connectorOffset = slicedOffset + (options.borderWidth || 0),
  252. finalConnectorOffset,
  253. start,
  254. end,
  255. angle,
  256. startAngle = options.startAngle || 0,
  257. startAngleRad = Math.PI / 180 * (startAngle - 90),
  258. endAngleRad = Math.PI / 180 * (pick(
  259. options.endAngle,
  260. startAngle + 360
  261. ) - 90),
  262. circ = endAngleRad - startAngleRad, // 2 * Math.PI,
  263. points = series.points,
  264. // the x component of the radius vector for a given point
  265. radiusX,
  266. radiusY,
  267. labelDistance = options.dataLabels.distance,
  268. ignoreHiddenPoint = options.ignoreHiddenPoint,
  269. i,
  270. len = points.length,
  271. point,
  272. pointRadii,
  273. pointRadiusX,
  274. pointRadiusY;
  275. series.startAngleRad = startAngleRad;
  276. series.endAngleRad = endAngleRad;
  277. // Use calculateExtremes to get series.radii array.
  278. series.calculateExtremes();
  279. // Get positions - either an integer or a percentage string must be
  280. // given. If positions are passed as a parameter, we're in a
  281. // recursive loop for adjusting space for data labels.
  282. if (!positions) {
  283. series.center = positions = series.getCenter();
  284. }
  285. // Calculate the geometry for each point
  286. for (i = 0; i < len; i++) {
  287. point = points[i];
  288. pointRadii = series.radii[i];
  289. // Used for distance calculation for specific point.
  290. point.labelDistance = pick(
  291. point.options.dataLabels &&
  292. point.options.dataLabels.distance,
  293. labelDistance
  294. );
  295. // Saved for later dataLabels distance calculation.
  296. series.maxLabelDistance = Math.max(
  297. series.maxLabelDistance || 0,
  298. point.labelDistance
  299. );
  300. // set start and end angle
  301. start = startAngleRad + (cumulative * circ);
  302. if (!ignoreHiddenPoint || point.visible) {
  303. cumulative += point.percentage / 100;
  304. }
  305. end = startAngleRad + (cumulative * circ);
  306. // set the shape
  307. point.shapeType = 'arc';
  308. point.shapeArgs = {
  309. x: positions[0],
  310. y: positions[1],
  311. r: pointRadii,
  312. innerR: positions[3] / 2,
  313. start: Math.round(start * precision) / precision,
  314. end: Math.round(end * precision) / precision
  315. };
  316. // The angle must stay within -90 and 270 (#2645)
  317. angle = (end + start) / 2;
  318. if (angle > 1.5 * Math.PI) {
  319. angle -= 2 * Math.PI;
  320. } else if (angle < -Math.PI / 2) {
  321. angle += 2 * Math.PI;
  322. }
  323. // Center for the sliced out slice
  324. point.slicedTranslation = {
  325. translateX: Math.round(Math.cos(angle) * slicedOffset),
  326. translateY: Math.round(Math.sin(angle) * slicedOffset)
  327. };
  328. // set the anchor point for tooltips
  329. radiusX = Math.cos(angle) * positions[2] / 2;
  330. radiusY = Math.sin(angle) * positions[2] / 2;
  331. pointRadiusX = Math.cos(angle) * pointRadii;
  332. pointRadiusY = Math.sin(angle) * pointRadii;
  333. point.tooltipPos = [
  334. positions[0] + radiusX * 0.7,
  335. positions[1] + radiusY * 0.7
  336. ];
  337. point.half = angle < -Math.PI / 2 || angle > Math.PI / 2 ?
  338. 1 :
  339. 0;
  340. point.angle = angle;
  341. // Set the anchor point for data labels. Use point.labelDistance
  342. // instead of labelDistance // #1174
  343. // finalConnectorOffset - not override connectorOffset value.
  344. finalConnectorOffset = Math.min(
  345. connectorOffset,
  346. point.labelDistance / 5
  347. ); // #1678
  348. point.labelPosition = {
  349. natural: {
  350. // initial position of the data label - it's utilized
  351. // for finding the final position for the label
  352. x: positions[0] + pointRadiusX +
  353. Math.cos(angle) * point.labelDistance,
  354. y: positions[1] + pointRadiusY +
  355. Math.sin(angle) * point.labelDistance
  356. },
  357. 'final': {
  358. // used for generating connector path -
  359. // initialized later in drawDataLabels function
  360. // x: undefined,
  361. // y: undefined
  362. },
  363. // left - pie on the left side of the data label
  364. // right - pie on the right side of the data label
  365. alignment: point.half ? 'right' : 'left',
  366. connectorPosition: {
  367. breakAt: { // used in connectorShapes.fixedOffset
  368. x: positions[0] + pointRadiusX +
  369. Math.cos(angle) * finalConnectorOffset,
  370. y: positions[1] + pointRadiusY +
  371. Math.sin(angle) * finalConnectorOffset
  372. },
  373. touchingSliceAt: { // middle of the arc
  374. x: positions[0] + pointRadiusX,
  375. y: positions[1] + pointRadiusY
  376. }
  377. }
  378. };
  379. }
  380. }
  381. }
  382. );
  383. /**
  384. * A `variablepie` series. If the [type](#series.variablepie.type) option is not
  385. * specified, it is inherited from [chart.type](#chart.type).
  386. *
  387. * @extends series,plotOptions.variablepie
  388. * @excluding dataParser, dataURL, stack, xAxis, yAxis
  389. * @product highcharts
  390. * @apioption series.variablepie
  391. */
  392. /**
  393. * An array of data points for the series. For the `variablepie` series type,
  394. * points can be given in the following ways:
  395. *
  396. * 1. An array of arrays with 2 values. In this case, the numerical values will
  397. * be interpreted as `y, z` options. Example:
  398. * ```js
  399. * data: [
  400. * [40, 75],
  401. * [50, 50],
  402. * [60, 40]
  403. * ]
  404. * ```
  405. *
  406. * 2. An array of objects with named values. The following snippet shows only a
  407. * few settings, see the complete options set below. If the total number of
  408. * data points exceeds the series'
  409. * [turboThreshold](#series.variablepie.turboThreshold), this option is not
  410. * available.
  411. * ```js
  412. * data: [{
  413. * y: 1,
  414. * z: 4,
  415. * name: "Point2",
  416. * color: "#00FF00"
  417. * }, {
  418. * y: 7,
  419. * z: 10,
  420. * name: "Point1",
  421. * color: "#FF00FF"
  422. * }]
  423. * ```
  424. *
  425. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  426. * Arrays of numeric x and y
  427. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  428. * Arrays of datetime x and y
  429. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  430. * Arrays of point.name and y
  431. * @sample {highcharts} highcharts/series/data-array-of-objects/
  432. * Config objects
  433. *
  434. * @type {Array<Array<(number|string),number>|*>}
  435. * @extends series.pie.data
  436. * @excluding marker, x
  437. * @product highcharts
  438. * @apioption series.variablepie.data
  439. */
  440. }(Highcharts));
  441. return (function () {
  442. }());
  443. }));