chart.lineargauge.js 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234
  1. (function(Chart) {
  2. var helpers = Chart.helpers;
  3. var plugins = Chart.plugins;
  4. Chart.defaults.global.animation.duration = 1000;
  5. Chart.defaults._set('linearGauge', {
  6. scale: {
  7. type: 'linearGauge',
  8. horizontal: false,
  9. range: {
  10. startValue: -100,
  11. endValue: 500
  12. },
  13. responsive: true,
  14. font: {
  15. fontName: 'Arial',
  16. fontSize: 12
  17. },
  18. axisWidth: 6,
  19. ticks: {
  20. majorTicks: {
  21. interval: 100,
  22. height: 1,
  23. }
  24. },
  25. scaleLabel: {
  26. display: true,
  27. interval: 100,
  28. units: '',
  29. customValues: [],
  30. offset: -10,
  31. color: '#777b80'
  32. }
  33. },
  34. padding: {
  35. top: 0,
  36. bottom: 0,
  37. left: 0,
  38. right: 0
  39. },
  40. tooltips: {
  41. callbacks: {
  42. label: function(tooltipItem, data) {
  43. var label = data.datasets[tooltipItem.datasetIndex].label || '';
  44. if (label) {
  45. label += ': ';
  46. }
  47. label += Math.round(data.datasets[tooltipItem.datasetIndex].data[0] * 100) / 100;
  48. return label;
  49. }
  50. }
  51. },
  52. legend: {
  53. display: true,
  54. labels: {
  55. fontColor: 'rgb(0, 0, 0)'
  56. },
  57. position: 'bottom'
  58. }
  59. });
  60. Chart.controllers.linearGauge = Chart.DatasetController.extend({
  61. dataElementType: Chart.elements.Gaugerect,
  62. initialize: function() {
  63. var me = this;
  64. var meta;
  65. Chart.DatasetController.prototype.initialize.apply(me, arguments);
  66. meta = me.getMeta();
  67. },
  68. linkScales: helpers.noop,
  69. update: function(reset) {
  70. var me = this;
  71. var rects = me.getMeta().data;
  72. var i, ilen;
  73. me.datashifts = 0;
  74. for (i = 0, ilen = rects.length; i < ilen; ++i) {
  75. me.updateElement(rects[i], i, me.datashifts);
  76. me.datashifts += 10;
  77. }
  78. },
  79. updateElement: function(rectangle, index, reset) {
  80. var me = this;
  81. var chart = me.chart;
  82. var meta = me.getMeta();
  83. var dataset = me.getDataset();
  84. var custom = rectangle.custom || {};
  85. var rectangleOptions = chart.options.elements.rectangle;
  86. var gaugeOptions = chart.options.elements.gaugerect;
  87. rectangle._Scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
  88. rectangle._datasetIndex = me.index;
  89. rectangle._index = index;
  90. rectangle.rangeColorImage = null;
  91. // Init element model
  92. rectangle._model = {
  93. datasetLabel: dataset.label,
  94. label: chart.data.labels[index],
  95. borderSkipped: custom.borderSkipped ? custom.borderSkipped : rectangleOptions.borderSkipped,
  96. backgroundColor: custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, gaugeOptions.backgroundColor),
  97. borderColor: custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleOptions.borderColor),
  98. borderWidth: custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleOptions.borderWidth)
  99. };
  100. // Set empty view as start point for animation
  101. if(typeof rectangle._view === 'undefined') rectangle._view = {};
  102. me.updateElementGeometry(rectangle, index, reset);
  103. },
  104. updateElementGeometry: function(rectangle, index, reset) {
  105. var me = this;
  106. var model = rectangle._model;
  107. var start = rectangle._view;
  108. var dataset = me.getDataset().data;
  109. var dopt = me.getDataset();
  110. var chart = me.chart;
  111. var datasets = chart.data.datasets;
  112. var gaugeOptions = chart.options.elements.gaugerect;
  113. var vscale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
  114. //var base = vscale.getBasePixel();
  115. var base = vscale.getBase();
  116. var horizontal = rectangle._Scale.isHorizontal();
  117. //var ruler = me._ruler || me.getRuler();
  118. var vpixels = me.calculateBarValuePixels(me.index, index, horizontal);
  119. model.horizontal = horizontal;
  120. model.base = base;
  121. model.head = vpixels.head;
  122. model.x = horizontal ? vpixels.base : vpixels.offset;
  123. model.y = horizontal ? (vpixels.offset - (dopt.width || gaugeOptions.width)) : vpixels.head;
  124. model.height = horizontal ? (dopt.width || gaugeOptions.width) : (vpixels.base - vpixels.head);
  125. model.width = horizontal ? (vpixels.head - vpixels.base) : (dopt.width || gaugeOptions.width);
  126. model.value = vscale.getRightValue(datasets[me.index].data[index]);
  127. model.scaleValue = 0;
  128. if (horizontal) {
  129. model.scaleValue = vscale.width / (vscale.options.range.endValue - vscale.options.range.startValue);
  130. } else {
  131. model.scaleValue = vscale.height / (vscale.options.range.endValue - vscale.options.range.startValue);
  132. }
  133. if(typeof start.x === 'undefined' && typeof start.y === 'undefined'){
  134. if(horizontal){
  135. start.x = vpixels.base;
  136. start.width = 0;
  137. } else {
  138. start.y = vpixels.base;
  139. start.height = 0;
  140. }
  141. }
  142. },
  143. calculateBarValuePixels: function(datasetIndex, index, horizontal) {
  144. var me = this;
  145. var chart = me.chart;
  146. var scale = me.getScaleForId(chart.options.scale.id || 'gaugescale');
  147. var datasets = chart.data.datasets;
  148. var dopt = datasets[datasetIndex];
  149. var value = scale.getRightValue(datasets[datasetIndex].data[index]);
  150. var stacked = scale.options.stacked;
  151. var start = 0;
  152. var i, imeta, ivalue, base, head, size, offset;
  153. base = scale.scalePoint(start);
  154. head = scale.scalePoint(start + value);
  155. size = (head - base) / 2;
  156. offset = horizontal ? scale.yCenter - dopt.offset : scale.xCenter + dopt.offset;
  157. return {
  158. size: size,
  159. base: base,
  160. head: head,
  161. center: head + size / 2,
  162. offset: offset
  163. };
  164. },
  165. draw: function() {
  166. var me = this;
  167. var chart = me.chart;
  168. var rects = me.getMeta().data;
  169. var dataset = me.getDataset();
  170. var ilen = rects.length;
  171. var i = 0;
  172. helpers.canvas.clipArea(chart.ctx, chart.chartArea);
  173. for (; i < ilen; ++i) {
  174. if (!isNaN(dataset.data[i])) {
  175. rects[i].draw();
  176. }
  177. }
  178. helpers.canvas.unclipArea(chart.ctx);
  179. },
  180. setHoverStyle: function(rectangle) {
  181. var dataset = this.chart.data.datasets[rectangle._datasetIndex];
  182. var index = rectangle._index;
  183. var custom = rectangle.custom || {};
  184. var model = rectangle._model;
  185. model.backgroundColor = custom.hoverBackgroundColor ? custom.hoverBackgroundColor : helpers.valueAtIndexOrDefault(dataset.hoverBackgroundColor, index, helpers.getHoverColor(model.backgroundColor));
  186. model.borderColor = custom.hoverBorderColor ? custom.hoverBorderColor : helpers.valueAtIndexOrDefault(dataset.hoverBorderColor, index, helpers.getHoverColor(model.borderColor));
  187. model.borderWidth = custom.hoverBorderWidth ? custom.hoverBorderWidth : helpers.valueAtIndexOrDefault(dataset.hoverBorderWidth, index, model.borderWidth);
  188. },
  189. removeHoverStyle: function(rectangle) {
  190. var dataset = this.chart.data.datasets[rectangle._datasetIndex];
  191. var index = rectangle._index;
  192. var custom = rectangle.custom || {};
  193. var model = rectangle._model;
  194. var rectangleElementOptions = this.chart.options.elements.gaugerect;
  195. model.backgroundColor = custom.backgroundColor ? custom.backgroundColor : helpers.valueAtIndexOrDefault(dataset.backgroundColor, index, rectangleElementOptions.backgroundColor);
  196. model.borderColor = custom.borderColor ? custom.borderColor : helpers.valueAtIndexOrDefault(dataset.borderColor, index, rectangleElementOptions.borderColor);
  197. model.borderWidth = custom.borderWidth ? custom.borderWidth : helpers.valueAtIndexOrDefault(dataset.borderWidth, index, rectangleElementOptions.borderWidth);
  198. }
  199. });
  200. }).call(this, Chart);