ee2cca787f6b94bb4b026f85b6e7e311c2d5b2721e0b8345a3814ef3a6204812222a96fcd8865f05cc45463bafdf457060d2e74a00b004299488ec985d2886 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /**
  2. * @module Options
  3. */
  4. 'use strict';
  5. import Chart from 'chart.js';
  6. var helpers = Chart.helpers;
  7. export default {
  8. /**
  9. * The label box alignment relative to `anchor` that can be expressed either by a number
  10. * representing the clockwise angle (in degree) or by one of the following string presets:
  11. * - 'start': before the anchor point, following the same direction
  12. * - 'end': after the anchor point, following the same direction
  13. * - 'center': centered on the anchor point
  14. * - 'right': 0°
  15. * - 'bottom': 90°
  16. * - 'left': 180°
  17. * - 'top': 270°
  18. * @member {String|Number|Array|Function}
  19. * @default 'center'
  20. */
  21. align: 'center',
  22. /**
  23. * The label box alignment relative to the element ('start'|'center'|'end')
  24. * @member {String|Array|Function}
  25. * @default 'center'
  26. */
  27. anchor: 'center',
  28. /**
  29. * The color used to draw the background of the surrounding frame.
  30. * @member {String|Array|Function|null}
  31. * @default null (no background)
  32. */
  33. backgroundColor: null,
  34. /**
  35. * The color used to draw the border of the surrounding frame.
  36. * @member {String|Array|Function|null}
  37. * @default null (no border)
  38. */
  39. borderColor: null,
  40. /**
  41. * The border radius used to add rounded corners to the surrounding frame.
  42. * @member {Number|Array|Function}
  43. * @default 0 (not rounded)
  44. */
  45. borderRadius: 0,
  46. /**
  47. * The border width of the surrounding frame.
  48. * @member {Number|Array|Function}
  49. * @default 0 (no border)
  50. */
  51. borderWidth: 0,
  52. /**
  53. * The color used to draw the label text.
  54. * @member {String|Array|Function}
  55. * @default undefined (use Chart.defaults.global.defaultFontColor)
  56. */
  57. color: undefined,
  58. /**
  59. * Whether to display labels global (boolean) or per data (function)
  60. * @member {Boolean|Array|Function}
  61. * @default true
  62. */
  63. display: true,
  64. /**
  65. * The font options used to draw the label text.
  66. * @member {Object|Array|Function}
  67. * @prop {String} font.family - defaults to Chart.defaults.global.defaultFontFamily
  68. * @prop {Number} font.lineHeight - defaults to 1.2
  69. * @prop {Number} font.size - defaults to Chart.defaults.global.defaultFontSize
  70. * @prop {String} font.style - defaults to Chart.defaults.global.defaultFontStyle
  71. * @prop {Number} font.weight - defaults to 'normal'
  72. * @default Chart.defaults.global.defaultFont.*
  73. */
  74. font: {
  75. family: undefined,
  76. lineHeight: 1.2,
  77. size: undefined,
  78. style: undefined,
  79. weight: null
  80. },
  81. /**
  82. * The distance (in pixels) to pull the label away from the anchor point, the direction
  83. * being determined by the `align` value (only applicable if `align` is `start` or `end`).
  84. * @member {Number|Array|Function}
  85. * @default 4
  86. */
  87. offset: 4,
  88. /**
  89. * The label global opacity, including the text, background, borders, etc., specified as
  90. * a number between 0.0 (fully transparent) and 1.0 (fully opaque).
  91. * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalAlpha
  92. * @member {Number|Array|Function}
  93. * @default 1
  94. */
  95. opacity: 1,
  96. /**
  97. * The padding (in pixels) to apply between the text and the surrounding frame.
  98. * @member {Number|Object|Array|Function}
  99. * @prop {Number} padding.top - Space above the text.
  100. * @prop {Number} padding.right - Space on the right of the text.
  101. * @prop {Number} padding.bottom - Space below the text.
  102. * @prop {Number} padding.left - Space on the left of the text.
  103. * @default 4 (all values)
  104. */
  105. padding: {
  106. top: 4,
  107. right: 4,
  108. bottom: 4,
  109. left: 4
  110. },
  111. /**
  112. * Clockwise rotation of the label relative to its center.
  113. * @member {Number|Array|Function}
  114. * @default 0
  115. */
  116. rotation: 0,
  117. /**
  118. * Text alignment for multi-lines labels ('left'|'right'|'start'|'center'|'end').
  119. * @member {String|Array|Function}
  120. * @default 'start'
  121. */
  122. textAlign: 'start',
  123. /**
  124. * Allows to customize the label text by transforming input data.
  125. * @member {Function|null}
  126. * @prop {*} value - The data value
  127. * @prop {Object} context - The function unique argument:
  128. * @prop {Chart} context.chart - The current chart
  129. * @prop {Number} context.dataIndex - Index of the current data
  130. * @prop {Object} context.dataset - The current dataset
  131. * @prop {Number} context.datasetIndex - Index of the current dataset
  132. * @default data[index]
  133. */
  134. formatter: function(value) {
  135. if (helpers.isNullOrUndef(value)) {
  136. return null;
  137. }
  138. var label = value;
  139. var keys, klen, k;
  140. if (helpers.isObject(value)) {
  141. if (!helpers.isNullOrUndef(value.label)) {
  142. label = value.label;
  143. } else if (!helpers.isNullOrUndef(value.r)) {
  144. label = value.r;
  145. } else {
  146. label = '';
  147. keys = Object.keys(value);
  148. for (k = 0, klen = keys.length; k < klen; ++k) {
  149. label += (k !== 0 ? ', ' : '') + keys[k] + ': ' + value[keys[k]];
  150. }
  151. }
  152. }
  153. return '' + label;
  154. },
  155. /**
  156. * Event listeners, where the property is the type of the event to listen and the value
  157. * a callback with a unique `context` argument containing the same information as for
  158. * scriptable options. If a callback explicitly returns `true`, the label is updated
  159. * with the current context and the chart re-rendered. This allows to implement visual
  160. * interactions with labels such as highlight, selection, etc.
  161. *
  162. * Event currently supported are:
  163. * - 'click': a mouse click is detected within a label
  164. * - 'enter': the mouse enters a label
  165. * -' leave': the mouse leaves a label
  166. *
  167. * @member {Object}
  168. * @default {}
  169. */
  170. listeners: {}
  171. };