no-data-to-display.src.js 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. /* *
  2. *
  3. * Plugin for displaying a message when there is no data visible in chart.
  4. *
  5. * (c) 2010-2019 Highsoft AS
  6. *
  7. * Author: Oystein Moseng
  8. *
  9. * License: www.highcharts.com/license
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../parts/Globals.js';
  14. import '../parts/Utilities.js';
  15. import '../parts/Series.js';
  16. import '../parts/Options.js';
  17. var seriesTypes = H.seriesTypes,
  18. chartPrototype = H.Chart.prototype,
  19. defaultOptions = H.getOptions(),
  20. extend = H.extend;
  21. // Add language option
  22. extend(
  23. defaultOptions.lang,
  24. /**
  25. * @optionparent lang
  26. */
  27. {
  28. /**
  29. * The text to display when the chart contains no data. Requires the
  30. * no-data module, see [noData](#noData).
  31. *
  32. * @sample highcharts/no-data-to-display/no-data-line
  33. * No-data text
  34. *
  35. * @since 3.0.8
  36. * @product highcharts highstock
  37. */
  38. noData: 'No data to display'
  39. }
  40. );
  41. // Add default display options for message
  42. /**
  43. * Options for displaying a message like "No data to display".
  44. * This feature requires the file no-data-to-display.js to be loaded in the
  45. * page. The actual text to display is set in the lang.noData option.
  46. *
  47. * @sample highcharts/no-data-to-display/no-data-line
  48. * Line chart with no-data module
  49. * @sample highcharts/no-data-to-display/no-data-pie
  50. * Pie chart with no-data module
  51. *
  52. * @product highcharts highstock gantt
  53. * @optionparent noData
  54. */
  55. defaultOptions.noData = {
  56. /**
  57. * An object of additional SVG attributes for the no-data label.
  58. *
  59. * @type {Highcharts.SVGAttributes}
  60. * @since 3.0.8
  61. * @product highcharts highstock gantt
  62. * @apioption noData.attr
  63. */
  64. /**
  65. * Whether to insert the label as HTML, or as pseudo-HTML rendered with
  66. * SVG.
  67. *
  68. * @type {boolean}
  69. * @default false
  70. * @since 4.1.10
  71. * @product highcharts highstock gantt
  72. * @apioption noData.useHTML
  73. */
  74. /**
  75. * The position of the no-data label, relative to the plot area.
  76. *
  77. * @type {Highcharts.AlignObject}
  78. * @since 3.0.8
  79. */
  80. position: {
  81. /**
  82. * Horizontal offset of the label, in pixels.
  83. */
  84. x: 0,
  85. /**
  86. * Vertical offset of the label, in pixels.
  87. */
  88. y: 0,
  89. /**
  90. * Horizontal alignment of the label.
  91. *
  92. * @type {Highcharts.AlignType}
  93. */
  94. align: 'center',
  95. /**
  96. * Vertical alignment of the label.
  97. *
  98. * @type {Highcharts.VerticalAlignType}
  99. */
  100. verticalAlign: 'middle'
  101. },
  102. /**
  103. * CSS styles for the no-data label.
  104. *
  105. * @sample highcharts/no-data-to-display/no-data-line
  106. * Styled no-data text
  107. *
  108. * @type {Highcharts.CSSObject}
  109. */
  110. style: {
  111. /** @ignore */
  112. fontWeight: 'bold',
  113. /** @ignore */
  114. fontSize: '12px',
  115. /** @ignore */
  116. color: '#666666'
  117. }
  118. };
  119. // Define hasData function for non-cartesian seris. Returns true if the series
  120. // has points at all.
  121. [
  122. 'bubble',
  123. 'gauge',
  124. 'heatmap',
  125. 'networkgraph',
  126. 'pie',
  127. 'sankey',
  128. 'treemap',
  129. 'waterfall'
  130. ].forEach(function (type) {
  131. if (seriesTypes[type]) {
  132. seriesTypes[type].prototype.hasData = function () {
  133. return !!this.points.length; // != 0
  134. };
  135. }
  136. });
  137. /**
  138. * Define hasData functions for series. These return true if there are data
  139. * points on this series within the plot area.
  140. *
  141. * @private
  142. * @function Highcharts.Series#hasData
  143. *
  144. * @return {boolean}
  145. */
  146. H.Series.prototype.hasData = function () {
  147. return (
  148. (
  149. this.visible &&
  150. this.dataMax !== undefined &&
  151. this.dataMin !== undefined
  152. ) || // #3703
  153. (this.visible && this.yData && this.yData.length > 0) // #9758
  154. );
  155. };
  156. /**
  157. * Display a no-data message.
  158. *
  159. * @private
  160. * @function Highcharts.Chart#showNoData
  161. *
  162. * @param {string} str
  163. * An optional message to show in place of the default one
  164. */
  165. chartPrototype.showNoData = function (str) {
  166. var chart = this,
  167. options = chart.options,
  168. text = str || (options && options.lang.noData),
  169. noDataOptions = options && options.noData;
  170. if (!chart.noDataLabel && chart.renderer) {
  171. chart.noDataLabel = chart.renderer
  172. .label(
  173. text,
  174. 0,
  175. 0,
  176. null,
  177. null,
  178. null,
  179. noDataOptions.useHTML,
  180. null,
  181. 'no-data'
  182. );
  183. if (!chart.styledMode) {
  184. chart.noDataLabel
  185. .attr(noDataOptions.attr)
  186. .css(noDataOptions.style);
  187. }
  188. chart.noDataLabel.add();
  189. chart.noDataLabel.align(
  190. extend(chart.noDataLabel.getBBox(), noDataOptions.position),
  191. false,
  192. 'plotBox'
  193. );
  194. }
  195. };
  196. /**
  197. * Hide no-data message.
  198. *
  199. * @private
  200. * @function Highcharts.Chart#hideNoData
  201. */
  202. chartPrototype.hideNoData = function () {
  203. var chart = this;
  204. if (chart.noDataLabel) {
  205. chart.noDataLabel = chart.noDataLabel.destroy();
  206. }
  207. };
  208. /**
  209. * Returns true if there are data points within the plot area now.
  210. *
  211. * @private
  212. * @function Highcharts.Chart#hasData
  213. */
  214. chartPrototype.hasData = function () {
  215. var chart = this,
  216. series = chart.series || [],
  217. i = series.length;
  218. while (i--) {
  219. if (series[i].hasData() && !series[i].options.isInternal) {
  220. return true;
  221. }
  222. }
  223. return chart.loadingShown; // #4588
  224. };
  225. // Add event listener to handle automatic show or hide no-data message.
  226. H.addEvent(H.Chart, 'render', function handleNoData() {
  227. if (this.hasData()) {
  228. this.hideNoData();
  229. } else {
  230. this.showNoData();
  231. }
  232. });