ScatterSeries.js 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. /* *
  2. *
  3. * (c) 2010-2020 Torstein Honsi
  4. *
  5. * License: www.highcharts.com/license
  6. *
  7. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  8. *
  9. * */
  10. 'use strict';
  11. import H from '../Core/Globals.js';
  12. import U from '../Core/Utilities.js';
  13. var addEvent = U.addEvent, seriesType = U.seriesType;
  14. import '../Core/Options.js';
  15. import '../Core/Series/Series.js';
  16. var Series = H.Series;
  17. /**
  18. * Scatter series type.
  19. *
  20. * @private
  21. * @class
  22. * @name Highcharts.seriesTypes.scatter
  23. *
  24. * @augments Highcharts.Series
  25. */
  26. seriesType('scatter', 'line',
  27. /**
  28. * A scatter plot uses cartesian coordinates to display values for two
  29. * variables for a set of data.
  30. *
  31. * @sample {highcharts} highcharts/demo/scatter/
  32. * Scatter plot
  33. *
  34. * @extends plotOptions.line
  35. * @excluding cropThreshold, pointPlacement, shadow, useOhlcData
  36. * @product highcharts highstock
  37. * @optionparent plotOptions.scatter
  38. */
  39. {
  40. /**
  41. * The width of the line connecting the data points.
  42. *
  43. * @sample {highcharts} highcharts/plotoptions/scatter-linewidth-none/
  44. * 0 by default
  45. * @sample {highcharts} highcharts/plotoptions/scatter-linewidth-1/
  46. * 1px
  47. *
  48. * @product highcharts highstock
  49. */
  50. lineWidth: 0,
  51. findNearestPointBy: 'xy',
  52. /**
  53. * Apply a jitter effect for the rendered markers. When plotting
  54. * discrete values, a little random noise may help telling the points
  55. * apart. The jitter setting applies a random displacement of up to `n`
  56. * axis units in either direction. So for example on a horizontal X
  57. * axis, setting the `jitter.x` to 0.24 will render the point in a
  58. * random position between 0.24 units to the left and 0.24 units to the
  59. * right of the true axis position. On a category axis, setting it to
  60. * 0.5 will fill up the bin and make the data appear continuous.
  61. *
  62. * When rendered on top of a box plot or a column series, a jitter value
  63. * of 0.24 will correspond to the underlying series' default
  64. * [groupPadding](
  65. * https://api.highcharts.com/highcharts/plotOptions.column.groupPadding)
  66. * and [pointPadding](
  67. * https://api.highcharts.com/highcharts/plotOptions.column.pointPadding)
  68. * settings.
  69. *
  70. * @sample {highcharts} highcharts/series-scatter/jitter
  71. * Jitter on a scatter plot
  72. *
  73. * @sample {highcharts} highcharts/series-scatter/jitter-boxplot
  74. * Jittered scatter plot on top of a box plot
  75. *
  76. * @product highcharts highstock
  77. * @since 7.0.2
  78. */
  79. jitter: {
  80. /**
  81. * The maximal X offset for the random jitter effect.
  82. */
  83. x: 0,
  84. /**
  85. * The maximal Y offset for the random jitter effect.
  86. */
  87. y: 0
  88. },
  89. marker: {
  90. enabled: true // Overrides auto-enabling in line series (#3647)
  91. },
  92. /**
  93. * Sticky tracking of mouse events. When true, the `mouseOut` event
  94. * on a series isn't triggered until the mouse moves over another
  95. * series, or out of the plot area. When false, the `mouseOut` event on
  96. * a series is triggered when the mouse leaves the area around the
  97. * series' graph or markers. This also implies the tooltip. When
  98. * `stickyTracking` is false and `tooltip.shared` is false, the tooltip
  99. * will be hidden when moving the mouse between series.
  100. *
  101. * @type {boolean}
  102. * @default false
  103. * @product highcharts highstock
  104. * @apioption plotOptions.scatter.stickyTracking
  105. */
  106. /**
  107. * A configuration object for the tooltip rendering of each single
  108. * series. Properties are inherited from [tooltip](#tooltip).
  109. * Overridable properties are `headerFormat`, `pointFormat`,
  110. * `yDecimals`, `xDateFormat`, `yPrefix` and `ySuffix`. Unlike other
  111. * series, in a scatter plot the series.name by default shows in the
  112. * headerFormat and point.x and point.y in the pointFormat.
  113. *
  114. * @product highcharts highstock
  115. */
  116. tooltip: {
  117. headerFormat: '<span style="color:{point.color}">\u25CF</span> ' +
  118. '<span style="font-size: 10px"> {series.name}</span><br/>',
  119. pointFormat: 'x: <b>{point.x}</b><br/>y: <b>{point.y}</b><br/>'
  120. }
  121. // Prototype members
  122. }, {
  123. sorted: false,
  124. requireSorting: false,
  125. noSharedTooltip: true,
  126. trackerGroups: ['group', 'markerGroup', 'dataLabelsGroup'],
  127. takeOrdinalPosition: false,
  128. /* eslint-disable valid-jsdoc */
  129. /**
  130. * @private
  131. * @function Highcharts.seriesTypes.scatter#drawGraph
  132. */
  133. drawGraph: function () {
  134. if (this.options.lineWidth) {
  135. Series.prototype.drawGraph.call(this);
  136. }
  137. },
  138. // Optionally add the jitter effect
  139. applyJitter: function () {
  140. var series = this, jitter = this.options.jitter, len = this.points.length;
  141. /**
  142. * Return a repeatable, pseudo-random number based on an integer
  143. * seed.
  144. * @private
  145. */
  146. function unrandom(seed) {
  147. var rand = Math.sin(seed) * 10000;
  148. return rand - Math.floor(rand);
  149. }
  150. if (jitter) {
  151. this.points.forEach(function (point, i) {
  152. ['x', 'y'].forEach(function (dim, j) {
  153. var axis, plotProp = 'plot' + dim.toUpperCase(), min, max, translatedJitter;
  154. if (jitter[dim] && !point.isNull) {
  155. axis = series[dim + 'Axis'];
  156. translatedJitter =
  157. jitter[dim] * axis.transA;
  158. if (axis && !axis.isLog) {
  159. // Identify the outer bounds of the jitter range
  160. min = Math.max(0, point[plotProp] - translatedJitter);
  161. max = Math.min(axis.len, point[plotProp] + translatedJitter);
  162. // Find a random position within this range
  163. point[plotProp] = min +
  164. (max - min) * unrandom(i + j * len);
  165. // Update clientX for the tooltip k-d-tree
  166. if (dim === 'x') {
  167. point.clientX = point.plotX;
  168. }
  169. }
  170. }
  171. });
  172. });
  173. }
  174. }
  175. /* eslint-enable valid-jsdoc */
  176. });
  177. /* eslint-disable no-invalid-this */
  178. addEvent(Series, 'afterTranslate', function () {
  179. if (this.applyJitter) {
  180. this.applyJitter();
  181. }
  182. });
  183. /* eslint-enable no-invalid-this */
  184. /**
  185. * A `scatter` series. If the [type](#series.scatter.type) option is
  186. * not specified, it is inherited from [chart.type](#chart.type).
  187. *
  188. * @extends series,plotOptions.scatter
  189. * @excluding cropThreshold, dataParser, dataURL, useOhlcData
  190. * @product highcharts highstock
  191. * @apioption series.scatter
  192. */
  193. /**
  194. * An array of data points for the series. For the `scatter` series
  195. * type, points can be given in the following ways:
  196. *
  197. * 1. An array of numerical values. In this case, the numerical values will be
  198. * interpreted as `y` options. The `x` values will be automatically
  199. * calculated, either starting at 0 and incremented by 1, or from
  200. * `pointStart` and `pointInterval` given in the series options. If the axis
  201. * has categories, these will be used. Example:
  202. * ```js
  203. * data: [0, 5, 3, 5]
  204. * ```
  205. *
  206. * 2. An array of arrays with 2 values. In this case, the values correspond to
  207. * `x,y`. If the first value is a string, it is applied as the name of the
  208. * point, and the `x` value is inferred.
  209. * ```js
  210. * data: [
  211. * [0, 0],
  212. * [1, 8],
  213. * [2, 9]
  214. * ]
  215. * ```
  216. *
  217. * 3. An array of objects with named values. The following snippet shows only a
  218. * few settings, see the complete options set below. If the total number of
  219. * data points exceeds the series'
  220. * [turboThreshold](#series.scatter.turboThreshold), this option is not
  221. * available.
  222. * ```js
  223. * data: [{
  224. * x: 1,
  225. * y: 2,
  226. * name: "Point2",
  227. * color: "#00FF00"
  228. * }, {
  229. * x: 1,
  230. * y: 4,
  231. * name: "Point1",
  232. * color: "#FF00FF"
  233. * }]
  234. * ```
  235. *
  236. * @sample {highcharts} highcharts/chart/reflow-true/
  237. * Numerical values
  238. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  239. * Arrays of numeric x and y
  240. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  241. * Arrays of datetime x and y
  242. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  243. * Arrays of point.name and y
  244. * @sample {highcharts} highcharts/series/data-array-of-objects/
  245. * Config objects
  246. *
  247. * @type {Array<number|Array<(number|string),(number|null)>|null|*>}
  248. * @extends series.line.data
  249. * @product highcharts highstock
  250. * @apioption series.scatter.data
  251. */
  252. ''; // adds doclets above to transpilat