vector.src.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
  1. /**
  2. * @license Highcharts JS v6.1.0 (2018-04-13)
  3. * Vector plot series module
  4. *
  5. * (c) 2010-2017 Torstein Honsi
  6. *
  7. * License: www.highcharts.com/license
  8. */
  9. 'use strict';
  10. (function (factory) {
  11. if (typeof module === 'object' && module.exports) {
  12. module.exports = factory;
  13. } else {
  14. factory(Highcharts);
  15. }
  16. }(function (Highcharts) {
  17. (function (H) {
  18. /**
  19. * Vector plot series module
  20. *
  21. * (c) 2010-2017 Torstein Honsi
  22. *
  23. * License: www.highcharts.com/license
  24. */
  25. var each = H.each,
  26. seriesType = H.seriesType;
  27. /**
  28. * A vector plot is a type of cartesian chart where each point has an X and Y
  29. * position, a length and a direction. Vectors are drawn as arrows.
  30. *
  31. * @extends {plotOptions.scatter}
  32. * @excluding boostThreshold,marker,connectEnds,connectNulls,cropThreshold,
  33. * dashStyle,gapSize,gapUnit,dataGrouping,linecap,shadow,stacking,
  34. * step
  35. * @product highcharts highstock
  36. * @sample {highcharts|highstock} highcharts/demo/vector-plot/
  37. * Vector pot
  38. * @since 6.0.0
  39. * @optionparent plotOptions.vector
  40. */
  41. seriesType('vector', 'scatter', {
  42. /**
  43. * The line width for each vector arrow.
  44. */
  45. lineWidth: 2,
  46. /**
  47. * @ignore
  48. */
  49. marker: null,
  50. /**
  51. * What part of the vector it should be rotated around. Can be one of
  52. * `start`, `center` and `end`. When `start`, the vectors will start from
  53. * the given [x, y] position, and when `end` the vectors will end in the
  54. * [x, y] position.
  55. *
  56. * @sample highcharts/plotoptions/vector-rotationorigin-start/
  57. * Rotate from start
  58. * @validvalue ["start", "center", "end"]
  59. */
  60. rotationOrigin: 'center',
  61. states: {
  62. hover: {
  63. /**
  64. * Additonal line width for the vector errors when they are hovered.
  65. */
  66. lineWidthPlus: 1
  67. }
  68. },
  69. tooltip: {
  70. pointFormat: '<b>[{point.x}, {point.y}]</b><br/>Length: <b>{point.length}</b><br/>Direction: <b>{point.direction}\u00B0</b><br/>'
  71. },
  72. /**
  73. * Maximum length of the arrows in the vector plot. The individual arrow
  74. * length is computed between 0 and this value.
  75. */
  76. vectorLength: 20
  77. }, {
  78. pointArrayMap: ['y', 'length', 'direction'],
  79. parallelArrays: ['x', 'y', 'length', 'direction'],
  80. /**
  81. * Get presentational attributes.
  82. */
  83. pointAttribs: function (point, state) {
  84. var options = this.options,
  85. stroke = point.color || this.color,
  86. strokeWidth = this.options.lineWidth;
  87. if (state) {
  88. stroke = options.states[state].color || stroke;
  89. strokeWidth =
  90. (options.states[state].lineWidth || strokeWidth) +
  91. (options.states[state].lineWidthPlus || 0);
  92. }
  93. return {
  94. 'stroke': stroke,
  95. 'stroke-width': strokeWidth
  96. };
  97. },
  98. markerAttribs: H.noop,
  99. getSymbol: H.noop,
  100. /**
  101. * Create a single arrow. It is later rotated around the zero
  102. * centerpoint.
  103. */
  104. arrow: function (point) {
  105. var path,
  106. fraction = point.length / this.lengthMax,
  107. o = {
  108. start: 10,
  109. center: 0,
  110. end: -10
  111. }[this.options.rotationOrigin] || 0,
  112. u = fraction * this.options.vectorLength / 20;
  113. // The stem and the arrow head. Draw the arrow first with rotation 0,
  114. // which is the arrow pointing down (vector from north to south).
  115. path = [
  116. 'M', 0, 7 * u + o, // base of arrow
  117. 'L', -1.5 * u, 7 * u + o,
  118. 0, 10 * u + o,
  119. 1.5 * u, 7 * u + o,
  120. 0, 7 * u + o,
  121. 0, -10 * u + o// top
  122. ];
  123. return path;
  124. },
  125. translate: function () {
  126. H.Series.prototype.translate.call(this);
  127. this.lengthMax = H.arrayMax(this.lengthData);
  128. },
  129. drawPoints: function () {
  130. var chart = this.chart;
  131. each(this.points, function (point) {
  132. var plotX = point.plotX,
  133. plotY = point.plotY;
  134. if (chart.isInsidePlot(plotX, plotY, chart.inverted)) {
  135. if (!point.graphic) {
  136. point.graphic = this.chart.renderer
  137. .path()
  138. .add(this.markerGroup);
  139. }
  140. point.graphic
  141. .attr({
  142. d: this.arrow(point),
  143. translateX: plotX,
  144. translateY: plotY,
  145. rotation: point.direction
  146. })
  147. .attr(this.pointAttribs(point));
  148. } else if (point.graphic) {
  149. point.graphic = point.graphic.destroy();
  150. }
  151. }, this);
  152. },
  153. drawGraph: H.noop,
  154. /*
  155. drawLegendSymbol: function (legend, item) {
  156. var options = legend.options,
  157. symbolHeight = legend.symbolHeight,
  158. square = options.squareSymbol,
  159. symbolWidth = square ? symbolHeight : legend.symbolWidth,
  160. path = this.arrow.call({
  161. lengthMax: 1,
  162. options: {
  163. vectorLength: symbolWidth
  164. }
  165. }, {
  166. length: 1
  167. });
  168. item.legendLine = this.chart.renderer.path(path)
  169. .addClass('highcharts-point')
  170. .attr({
  171. zIndex: 3,
  172. translateY: symbolWidth / 2,
  173. rotation: 270,
  174. 'stroke-width': 1,
  175. 'stroke': 'black'
  176. }).add(item.legendGroup);
  177. },
  178. */
  179. /**
  180. * Fade in the arrows on initiating series.
  181. */
  182. animate: function (init) {
  183. if (init) {
  184. this.markerGroup.attr({
  185. opacity: 0.01
  186. });
  187. } else {
  188. this.markerGroup.animate({
  189. opacity: 1
  190. }, H.animObject(this.options.animation));
  191. this.animate = null;
  192. }
  193. }
  194. });
  195. /**
  196. * A `vector` series. If the [type](#series.vector.type) option is not
  197. * specified, it is inherited from [chart.type](#chart.type).
  198. *
  199. * @type {Object}
  200. * @extends series,plotOptions.vector
  201. * @excluding dataParser,dataURL
  202. * @product highcharts highstock
  203. * @apioption series.vector
  204. */
  205. /**
  206. * An array of data points for the series. For the `vector` series type,
  207. * points can be given in the following ways:
  208. *
  209. * 1. An array of arrays with 4 values. In this case, the values correspond
  210. * to `x,y,length,direction`. If the first value is a string, it is applied as
  211. * the name of the point, and the `x` value is inferred.
  212. *
  213. * ```js
  214. * data: [
  215. * [0, 0, 10, 90],
  216. * [0, 1, 5, 180],
  217. * [1, 1, 2, 270]
  218. * ]
  219. * ```
  220. *
  221. * 2. An array of objects with named values. The objects are point
  222. * configuration objects as seen below. If the total number of data
  223. * points exceeds the series' [turboThreshold](#series.area.turboThreshold),
  224. * this option is not available.
  225. *
  226. * ```js
  227. * data: [{
  228. * x: 0,
  229. * y: 0,
  230. * name: "Point2",
  231. * length: 10,
  232. * direction: 90
  233. * }, {
  234. * x: 1,
  235. * y: 1,
  236. * name: "Point1",
  237. * direction: 270
  238. * }]
  239. * ```
  240. *
  241. * @type {Array<Object|Array|Number>}
  242. * @extends series.line.data
  243. * @sample {highcharts} highcharts/chart/reflow-true/
  244. * Numerical values
  245. * @sample {highcharts} highcharts/series/data-array-of-arrays/
  246. * Arrays of numeric x and y
  247. * @sample {highcharts} highcharts/series/data-array-of-arrays-datetime/
  248. * Arrays of datetime x and y
  249. * @sample {highcharts} highcharts/series/data-array-of-name-value/
  250. * Arrays of point.name and y
  251. * @sample {highcharts} highcharts/series/data-array-of-objects/
  252. * Config objects
  253. * @product highcharts highstock
  254. * @apioption series.vector.data
  255. */
  256. /**
  257. * The length of the vector. The rendered length will relate to the
  258. * `vectorLength` setting.
  259. *
  260. * @type {Number}
  261. * @product highcharts highstock
  262. * @apioption series.vector.data.length
  263. */
  264. /**
  265. * The vector direction in degrees, where 0 is north (pointing towards south).
  266. *
  267. * @type {Number}
  268. * @product highcharts highstock
  269. * @apioption series.vector.data.direction
  270. */
  271. }(Highcharts));
  272. }));