variable-pie.src.js 18 KB

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