variable-pie.src.js 17 KB

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