G2 - 层叠的趋势色块图

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>层叠的趋势色块图</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/as/g/datavis/g2/2.3.13/index.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script src="../../../static/moment.min.js"></script>
<script>
     var Shape = G2.Shape;
      Shape.registShape('polygon', 'borderRect', {
        drawShape: function(cfg, container) {
          var points = cfg.points; // 点从左下角开始，顺时针方向
          var path = [];
          path.push(['M', points[0].x, points[0].y]);
          path.push(['L', points[1].x, points[1].y]);
          path.push(['L', points[2].x, points[2].y]);
          path = this.parsePath(path);
          return container.addShape('rect', {
            attrs: {
              x: path[1][1],
              y: path[1][2], // 矩形起始点为左上角
              width: path[2][1] - path[1][1],
              height: path[0][2] - path[1][2],
              fill: cfg.color,
              radius: 2
            }
          });
        }
      });
      $.getJSON('https://os.alipayobjects.com/rmsportal/mYZtTiIHOyLsNcnQZfhw.json', function(data) {
        var source = [];
        for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          var series = obj.data;
          for (var j = 0; j < series.length - 1; j++) {
            var eachItem = series[j];
            var item = {};
            item.type = obj.seriesID;
            item.time = moment(eachItem.year + '-' + eachItem.period.slice(1)).valueOf();
            item.periodName = eachItem.periodName;
            item.ratio = ((eachItem.value * 1 - series[j + 1].value * 1) / eachItem.value * 1).toFixed(4) * 1;
            if (item.ratio > 0) {
              item.trend = 'rising';
            } else {
              item.trend = 'falling';
            }
            source.push(item);
          }
        }
        var Stat = G2.Stat;
        var chart = new G2.Chart({
          id: 'c1',
          forceFit: true,
          height: 500,
          plotCfg: {
            margin: [20, 10, 60, 20]
          }
        });
        var Frame = G2.Frame;
        var frame = new Frame(source);
        frame = Frame.sortBy(frame, function(obj1, obj2) {
          var time1 = (obj1.time);
          var time2 = (obj2.time);
          if (time1 < time2) return -1;
          if (time1 > time2) return 1;
          return 0;
        });
        frame = Frame.sortBy(frame, function(obj1, obj2) {
          if (obj1.time === obj2.time) {
            if (obj1.ratio > obj2.ratio) {
              return -1;
            } else {
              return 1;
            }
          }
          return 0;
        });
        var count = 0;
        var pCount = [];
        var newData = [];
        G2.Util.each(frame.toJSON(), function(obj, idx) {
          if (idx % 20 === 0 && idx > 0) {
            pCount.push(count);
            count = 0;
          }
          if (obj.ratio > 0) {
            count++;
          }
          if (idx === (source.length - 1)) {
            pCount.push(count);
          }
        });
        var c = pCount[0];
        var flag = false;
        G2.Util.each(frame.toJSON(), function(obj, idx) {
          if ((idx > 0) && (idx % 20 === 0)) {
            c = pCount[idx / 20];
            flag = false;
          }
          if (c === 0) {
            c = 1;
            flag = true;
          }
          obj.order = c;
          if (flag) {
            c++;
          } else {
            c--;
          }
          newData.push(obj);
        });
        chart.source(newData, {
          time: {
            type: 'timeCat',
            tickCount: 177,
            mask: 'yyyy-mm'
          },
          order: {
            type: 'cat',
            range: [-0.026, 1],
            tickCount: 5,
            values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
          },
          ratio: {
            formatter: function(val) {
              return val * 100 + '%';
            }
          }
        });
        chart.axis('time', {
          title: null,
          position: 'top',
          labels: {
            autoRotate: false
          },
          formatter: function(val) {
            if (['2009-01', '2010-01', '2011-01', '2012-01', '2013-01', '2014-01', '2015-01', '2016-01', '2017-01'].indexOf(val) > -1) {
              return val.slice(0, 4);
            }
            return '';
          }
        });
        chart.axis('order', {
          title: null,
          labelOffset: 5,
          tickLine: null
        });
        chart.legend(false);
        chart.facet(['trend'], {
          type: "mirror",
          margin: 0
        });
        chart.polygon().position('time*order').color('ratio', function(ratio) {
          if (ratio <= -0.01) {
            return '#C1573C';
          } else if (ratio <= -0.0075) {
            return '#E16546'
          } else if (ratio <= -0.005) {
            return '#F1A53D';
          } else if (ratio <= -0.0025) {
            return '#FCD450';
          } else if (ratio <= 0) {
            return '#EEE2C0';
          } else if (ratio <= 0.0025) {
            return '#CCDFBC';
          } else if (ratio <= 0.005) {
            return '#ADCD94';
          } else if (ratio <= 0.0075) {
            return '#7BB354';
          } else {
            return '#359AD9';
          }
        }).style({
          stroke: '#fff',
          lineWidth: 1
        }).tooltip('type*ratio').shape('borderRect');
        chart.render();

        var frontCanvas = chart.get('frontCanvas');
        var activeGroup1 = frontCanvas.addGroup();
        var activeGroup2 = frontCanvas.addGroup();
        var Util = G2.Util;
        chart.on('plotmove', function(ev) {
          var shape = ev.shape;
          if (shape) {
            var origin = shape.get('origin');
            var type = origin._origin.type;
            var views = chart.getViews();
            activeGroup1.clear();
            activeGroup2.clear();
            Util.each(views, function(view, idx) {
              var geoms = view.getGeoms();
              const coord = view.get('coord');
              if (idx === 0) {
                activeGroup1.setMatrix(coord.get('matrix').clone());
                G2.Util.each(geoms, (geom) => {
                  const shapes = geom.getShapes();
                  G2.Util.each(shapes, (shape) => {
                    if (shape.get('origin')._origin.type === type) {
                      let newShape;
                      newShape = activeGroup1.addShape('circle', {
                        attrs: {
                          x: shape.get('origin').x,
                          y: shape.get('origin').y,
                          r: 3,
                          fill: '#000',
                          fillOpacity: 0
                        }
                      });
                      newShape.setMatrix(shape.getMatrix());
                      newShape.set('origin', shape.get('origin'));
                      newShape.animate({
                        fillOpacity: 1
                      }, 750, 'linear');
                    }
                  });
                });
              } else {
                activeGroup2.setMatrix(coord.get('matrix').clone());
                G2.Util.each(geoms, (geom) => {
                  const shapes = geom.getShapes();
                  G2.Util.each(shapes, (shape) => {
                    if (shape.get('origin')._origin.type === type) {
                      let newShape;
                      newShape = activeGroup2.addShape('circle', {
                        attrs: {
                          x: shape.get('origin').x,
                          y: shape.get('origin').y,
                          r: 3,
                          fill: '#000',
                          fillOpacity: 0
                        }
                      });
                      newShape.setMatrix(shape.getMatrix());
                      newShape.set('origin', shape.get('origin'));
                      newShape.animate({
                        fillOpacity: 1
                      }, 750, 'linear');
                    }
                  });
                });
              }
            });
          } else {
            activeGroup1.clear();
            activeGroup2.clear();
          }
          frontCanvas.draw();
        });
        chart.on('plotleave', function(ev) {
          activeGroup1.clear();
          activeGroup2.clear();
          frontCanvas.draw();
        });
      });
</script>




      </body>
    </html>
          
层叠的趋势色块图
来自WSJ的Andrew Van Dam 和 Renee Lightner 每一类职业用一个圆角矩形表示，其颜色编码了与上个月相比工资的增长率大小。当光标悬停在某一类职业上时，其对应在整个时间轴上的变化都会用圆角矩形中心黑点高亮起来，方便观察细节趋势。了解更多