BoxplotView.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. /*
  2. * Licensed to the Apache Software Foundation (ASF) under one
  3. * or more contributor license agreements. See the NOTICE file
  4. * distributed with this work for additional information
  5. * regarding copyright ownership. The ASF licenses this file
  6. * to you under the Apache License, Version 2.0 (the
  7. * "License"); you may not use this file except in compliance
  8. * with the License. You may obtain a copy of the License at
  9. *
  10. * http://www.apache.org/licenses/LICENSE-2.0
  11. *
  12. * Unless required by applicable law or agreed to in writing,
  13. * software distributed under the License is distributed on an
  14. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  15. * KIND, either express or implied. See the License for the
  16. * specific language governing permissions and limitations
  17. * under the License.
  18. */
  19. var zrUtil = require("zrender/lib/core/util");
  20. var ChartView = require("../../view/Chart");
  21. var graphic = require("../../util/graphic");
  22. var Path = require("zrender/lib/graphic/Path");
  23. /*
  24. * Licensed to the Apache Software Foundation (ASF) under one
  25. * or more contributor license agreements. See the NOTICE file
  26. * distributed with this work for additional information
  27. * regarding copyright ownership. The ASF licenses this file
  28. * to you under the Apache License, Version 2.0 (the
  29. * "License"); you may not use this file except in compliance
  30. * with the License. You may obtain a copy of the License at
  31. *
  32. * http://www.apache.org/licenses/LICENSE-2.0
  33. *
  34. * Unless required by applicable law or agreed to in writing,
  35. * software distributed under the License is distributed on an
  36. * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  37. * KIND, either express or implied. See the License for the
  38. * specific language governing permissions and limitations
  39. * under the License.
  40. */
  41. // Update common properties
  42. var NORMAL_ITEM_STYLE_PATH = ['itemStyle'];
  43. var EMPHASIS_ITEM_STYLE_PATH = ['emphasis', 'itemStyle'];
  44. var BoxplotView = ChartView.extend({
  45. type: 'boxplot',
  46. render: function (seriesModel, ecModel, api) {
  47. var data = seriesModel.getData();
  48. var group = this.group;
  49. var oldData = this._data; // There is no old data only when first rendering or switching from
  50. // stream mode to normal mode, where previous elements should be removed.
  51. if (!this._data) {
  52. group.removeAll();
  53. }
  54. var constDim = seriesModel.get('layout') === 'horizontal' ? 1 : 0;
  55. data.diff(oldData).add(function (newIdx) {
  56. if (data.hasValue(newIdx)) {
  57. var itemLayout = data.getItemLayout(newIdx);
  58. var symbolEl = createNormalBox(itemLayout, data, newIdx, constDim, true);
  59. data.setItemGraphicEl(newIdx, symbolEl);
  60. group.add(symbolEl);
  61. }
  62. }).update(function (newIdx, oldIdx) {
  63. var symbolEl = oldData.getItemGraphicEl(oldIdx); // Empty data
  64. if (!data.hasValue(newIdx)) {
  65. group.remove(symbolEl);
  66. return;
  67. }
  68. var itemLayout = data.getItemLayout(newIdx);
  69. if (!symbolEl) {
  70. symbolEl = createNormalBox(itemLayout, data, newIdx, constDim);
  71. } else {
  72. updateNormalBoxData(itemLayout, symbolEl, data, newIdx);
  73. }
  74. group.add(symbolEl);
  75. data.setItemGraphicEl(newIdx, symbolEl);
  76. }).remove(function (oldIdx) {
  77. var el = oldData.getItemGraphicEl(oldIdx);
  78. el && group.remove(el);
  79. }).execute();
  80. this._data = data;
  81. },
  82. remove: function (ecModel) {
  83. var group = this.group;
  84. var data = this._data;
  85. this._data = null;
  86. data && data.eachItemGraphicEl(function (el) {
  87. el && group.remove(el);
  88. });
  89. },
  90. dispose: zrUtil.noop
  91. });
  92. var BoxPath = Path.extend({
  93. type: 'boxplotBoxPath',
  94. shape: {},
  95. buildPath: function (ctx, shape) {
  96. var ends = shape.points;
  97. var i = 0;
  98. ctx.moveTo(ends[i][0], ends[i][1]);
  99. i++;
  100. for (; i < 4; i++) {
  101. ctx.lineTo(ends[i][0], ends[i][1]);
  102. }
  103. ctx.closePath();
  104. for (; i < ends.length; i++) {
  105. ctx.moveTo(ends[i][0], ends[i][1]);
  106. i++;
  107. ctx.lineTo(ends[i][0], ends[i][1]);
  108. }
  109. }
  110. });
  111. function createNormalBox(itemLayout, data, dataIndex, constDim, isInit) {
  112. var ends = itemLayout.ends;
  113. var el = new BoxPath({
  114. shape: {
  115. points: isInit ? transInit(ends, constDim, itemLayout) : ends
  116. }
  117. });
  118. updateNormalBoxData(itemLayout, el, data, dataIndex, isInit);
  119. return el;
  120. }
  121. function updateNormalBoxData(itemLayout, el, data, dataIndex, isInit) {
  122. var seriesModel = data.hostModel;
  123. var updateMethod = graphic[isInit ? 'initProps' : 'updateProps'];
  124. updateMethod(el, {
  125. shape: {
  126. points: itemLayout.ends
  127. }
  128. }, seriesModel, dataIndex);
  129. var itemModel = data.getItemModel(dataIndex);
  130. var normalItemStyleModel = itemModel.getModel(NORMAL_ITEM_STYLE_PATH);
  131. var borderColor = data.getItemVisual(dataIndex, 'color'); // Exclude borderColor.
  132. var itemStyle = normalItemStyleModel.getItemStyle(['borderColor']);
  133. itemStyle.stroke = borderColor;
  134. itemStyle.strokeNoScale = true;
  135. el.useStyle(itemStyle);
  136. el.z2 = 100;
  137. var hoverStyle = itemModel.getModel(EMPHASIS_ITEM_STYLE_PATH).getItemStyle();
  138. graphic.setHoverStyle(el, hoverStyle);
  139. }
  140. function transInit(points, dim, itemLayout) {
  141. return zrUtil.map(points, function (point) {
  142. point = point.slice();
  143. point[dim] = itemLayout.initBaseline;
  144. return point;
  145. });
  146. }
  147. var _default = BoxplotView;
  148. module.exports = _default;