feat: interval-select interaction support highlight axis label.

antvis · Jul 17, 2018 · f92986f · f92986f
1 parent 19de234
commit f92986f
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 15 deletions.
diff --git a/demos/0-interacion-interval-select.html b/demos/0-interacion-interval-select.html
@@ -5,6 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <title>柱状图选中</title>
   <link rel="stylesheet" href="./assets/common.css">
+  <style>
+    .chart-label {
+      text-align: center;
+      font-size: 12px;
+      font-weight: normal;
+      color: #808080;
+    }
+  </style>
 </head>
 <body>
 <div>
@@ -37,17 +45,55 @@
   });
   chart.tooltip(false);
   chart.interval().position('year*sales');
+
+  // 绘制 guide
+  data.map(obj => {
+    chart.guide().html({
+      position: [ obj.year, obj.sales ],
+      html: `<div data-year="${obj.year}" class="chart-label">${obj.sales}</div>`,
+      alignX: 'center',
+      alignY: 'bottom'
+    });
+  });
+
   chart.render();
 
   chart.interaction('interval-select', {
     selectStyle: {
       stroke: '#000',
       lineWidth: 1
     },
-    unSelectStyle: null,
-    cancelable: false,
+    // unSelectStyle: null,
+    // cancelable: true,
+    selectAxisStyle: {
+      fill: '#000',
+      fontWeight: 'bold'
+    },
     onEnd(ev) {
       console.log(ev.data, ev.selected)
+      const { data, selected } = ev;
+      if (selected) {
+        $('.chart-label').each((index, el) => {
+          el = $(el);
+          if (el.data('year') === data.year) {
+            el.css({
+              color: '#000',
+            });
+          } else {
+            el.css({
+              color: '#808080',
+            });
+          }
+        });
+      } else {
+        $('.chart-label').each((index, el) => {
+          el = $(el);
+
+          el.css({
+            color: '#808080'
+          });
+        });
+      }
     }
   });
 </script>

diff --git a/demos/index.njk b/demos/index.njk
@@ -35,8 +35,8 @@
     {% endfor %}
   </div>
   <div id="doc-container" style="display:none;">
-    <!-- <div class="code-panel" id="code-panel" style="display: none;"> -->
-    <div class="code-panel" id="code-panel">
+    <div class="code-panel" id="code-panel" style="display: none;">
+    <!-- <div class="code-panel" id="code-panel"> -->
       <div class="code-banner">
         <a class="btn btn-light" href="#">back</a>
         <button id="execute" class="btn btn-primary">execute</button>

diff --git a/src/interaction/interval-select.js b/src/interaction/interval-select.js
@@ -9,34 +9,47 @@ class IntervalSelect extends Interaction {
     return Util.mix({}, defaultCfg, {
       startEvent: 'tap',
       processingEvent: null,
+      selectAxis: true, // 是否高亮坐标轴文本
+      selectAxisStyle: {
+        fontWeight: 'bold'
+      },
       selectStyle: {
         fillOpacity: 1
       }, // 被选中图形的样式
       unSelectStyle: {
         fillOpacity: 0.4
       }, // 未被选中图形的样式
-      cancelable: true // 选中之后是否允许取消选中，默认允许取消选中
+      cancelable: true// 选中之后是否允许取消选中，默认允许取消选中
     });
   }
 
+  _resetShape(shape) {
+    const originAttrs = shape.get('_originAttrs');
+    if (originAttrs) {
+      shape._attrs.attrs = originAttrs;
+      shape.set('_originAttrs', null);
+    }
+  }
+
   _reset() {
-    if (!this.selectedShape) {
+    const self = this;
+    if (!self.selectedShape) {
       return;
     }
-    const chart = this.chart;
+    const chart = self.chart;
     const geom = chart.get('geoms')[0];
     const container = geom.get('container');
     const children = container.get('children');
 
     Util.each(children, child => {
-      const originAttrs = child.get('_originAttrs');
-      if (originAttrs) {
-        child._attrs.attrs = originAttrs;
-        child.set('_originAttrs', null);
-      }
+      self._resetShape(child);
       child.set('_selected', false);
     });
-    this.canvas.draw();
+
+    if (self.selectedAxisShape) {
+      self._resetShape(self.selectedAxisShape);
+    }
+    self.canvas.draw();
   }
 
   start(ev) {
@@ -52,7 +65,7 @@ class IntervalSelect extends Interaction {
       return;
     }
 
-    // 查找被点击的 shapw
+    // 查找被点击的 shape
     const geom = chart.get('geoms')[0];
     const container = geom.get('container');
     const children = container.get('children');
@@ -76,7 +89,7 @@ class IntervalSelect extends Interaction {
         }
         this._reset(); // 允许取消选中
       } else { // 未被选中
-        const { selectStyle, unSelectStyle } = this;
+        const { selectStyle, unSelectStyle, selectAxisStyle } = this;
 
         if (!selectedShape.get('_originAttrs')) {
           const originAttrs = Object.assign({}, selectedShape.attr());
@@ -97,11 +110,38 @@ class IntervalSelect extends Interaction {
         });
 
         selectedShape.set('_selected', true);
+
+        if (this.selectAxis) { // 坐标轴高亮
+          if (this.selectedAxisShape) {
+            this._resetShape(this.selectedAxisShape);
+          }
+          // 查找 坐标轴 shape
+          const xScale = geom.getXScale();
+          const origin = selectedShape.get('origin')._origin;
+          const {
+            frontPlot,
+            backPlot
+          } = chart.get('axisController');
+
+          let axisShape;
+
+          Util.each(frontPlot.get('children').concat(backPlot.get('children')), s => {
+            if (s.get('value') === xScale.scale(origin[xScale.field])) {
+              axisShape = s;
+              return false;
+            }
+          });
+          this.selectedAxisShape = axisShape;
+          axisShape.set('_originAttrs', Object.assign({}, axisShape.attr()));
+          axisShape.attr(selectAxisStyle);
+        }
+
         this.canvas.draw();
       }
     } else { // 没有选中图形，恢复原态
       this._reset();
       this.selectedShape = null;
+      this.selectedAxisShape = null;
     }
   }