fix: 修复图例过滤不考虑空数据的问题。

src/plugin/legend.js

@@ -90,7 +90,7 @@ class LegendController {
     this.clear();
   }
 
-  addLegend(scale, items, filterVals) {
+  addLegend(scale, items, filteredVals) {
     const self = this;
     const legendCfg = self.legendCfg;
     const field = scale.field;
@@ -108,7 +108,7 @@ class LegendController {
         position = fieldCfg.position;
       }
       if (scale.isCategory) {
-        self._addCategoryLegend(scale, items, position, filterVals);
+        self._addCategoryLegend(scale, items, position, filteredVals);
       }
     }
   }
@@ -183,7 +183,7 @@ class LegendController {
       chart.get('width') - (appendPadding[1] + appendPadding[3]);
   }
 
-  _addCategoryLegend(scale, items, position, filterVals) {
+  _addCategoryLegend(scale, items, position, filteredVals) {
     const self = this;
     const { legendCfg, legends, container, chart } = self;
     const field = scale.field;
@@ -203,8 +203,8 @@ class LegendController {
         item.marker.symbol = symbol;
       }
 
-      if (filterVals) {
-        item.checked = self._isFiltered(scale, filterVals, item.dataValue);
+      if (filteredVals) {
+        item.checked = !self._isFiltered(scale, filteredVals, item.dataValue);
       }
     });
 
@@ -215,7 +215,7 @@ class LegendController {
       maxLength: self._getMaxLength(position),
       items,
       field,
-      filterVals,
+      filteredVals,
       parent: container
     });
     if (lastCfg.showTitle) {
@@ -333,22 +333,22 @@ class LegendController {
       } else if (!clickedLegend.custom) {
         const checked = clickedItem.get('checked');
         const value = clickedItem.get('dataValue');
-        const { filterVals, field, selectedMode } = clickedLegend;
+        const { filteredVals, field, selectedMode } = clickedLegend;
         const isSingeSelected = selectedMode === 'single';
 
         if (isSingeSelected) {
           chart.filter(field, val => {
             return val === value;
           });
         } else {
-          if (!checked) {
-            filterVals.push(value);
+          if (checked) {
+            filteredVals.push(value);
           } else {
-            Util.Array.remove(filterVals, value);
+            Util.Array.remove(filteredVals, value);
           }
 
           chart.filter(field, val => {
-            return filterVals.indexOf(val) !== -1;
+            return filteredVals.indexOf(val) === -1;
           });
         }
 
@@ -413,13 +413,13 @@ module.exports = {
       Util.each(legendItems, (items, field) => {
         const scale = scales[field];
         const values = scale.values;
-        let filterVals;
+        let filteredVals;
         if (filters && filters[field]) {
-          filterVals = values.filter(filters[field]);
+          filteredVals = values.filter(v => !filters[field](v));
         } else {
-          filterVals = values.slice(0);
+          filteredVals = [];
         }
-        legendController.addLegend(scale, items, filterVals);
+        legendController.addLegend(scale, items, filteredVals);
       });
     }
 

test/bug/legend-filter-spec.js

@@ -0,0 +1,60 @@
+const expect = require('chai').expect;
+const F2 = require('../../src/core');
+const { gestureSimulator } = require('../unit/test-util');
+
+require('../../src/geom/interval');
+const Legend = require('../../src/plugin/legend');
+require('../../src/geom/adjust/stack');
+
+
+describe('图例过滤未考虑数据中存在空数据的情况', () => {
+  let canvas;
+  let chart;
+  before(() => {
+    canvas = document.createElement('canvas');
+    canvas.width = 300;
+    canvas.height = 300;
+    canvas.id = 'legend-filter-null';
+    canvas.style.position = 'fixed';
+    canvas.style.top = 0;
+    canvas.style.left = 0;
+    document.body.appendChild(canvas);
+  });
+
+  it('filter', () => {
+    const data = [
+      { name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
+      { name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
+      { name: null, 月份: 'test' }
+    ];
+    chart = new F2.Chart({
+      id: 'legend-filter-null',
+      pixelRatio: 2,
+      plugins: [ Legend ]
+    });
+    chart.source(data, {
+      月均降雨量: {
+        tickCount: 5
+      }
+    });
+    chart.legend({
+      triggerOn: 'click'
+    });
+    chart.interval().position('月份*月均降雨量').color('name')
+      .adjust('stack');
+    chart.render();
+
+    gestureSimulator(canvas, 'click', {
+      clientX: 184,
+      clientY: 22
+    });
+
+    expect(chart.get('filteredData').length).to.equal(2);
+    console.log(chart.get('filteredData'));
+  });
+
+  after(() => {
+    chart.destroy();
+    document.body.removeChild(canvas);
+  });
+});