G2 - The Grammar Of Graphics

点图 / 时间序列散点图

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>时间序列散点图</title>
      <link rel="stylesheet" href="https://os.alipayobjects.com/s/prod/g2/static/doc-b57e62881a0344ecde9e68c4ce312143.css"/>
      
      <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
    </head>
    <body>
      <div id="c1"></div>
      
      <style>
  .ac-tooltip{
    position:absolute;
    visibility:hidden;
    border : 1px solid #efefef;
    border-radius: 3px;
    background-color: white;
    opacity: .85;
    padding: 8px;
    font-size: 12px;
    transition: top 200ms,left 200ms;
    -moz-transition:  top 200ms,left 200ms;  /* Firefox 4 */
    -webkit-transition:  top 200ms,left 200ms; /* Safari 和 Chrome */
    -o-transition:  top 200ms,left 200ms;
  }
  .ac-tooltip .ac-list{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ac-tooltip li{
    line-height:  22px; 
  }
</style>

G2.Global.activeShape.point = {
  stroke: 'blue',
  lineWidth: 3
}; // 自定义鼠标 hover 气泡上的样式主题
$.getJSON('../../static/data/scatter1.json',function (data) {
  var chart = new G2.Chart({
    id: 'c1',
    width: 1000,
    height: 500
  });
  for(var i=0;i<data.length;i++) {
    var item = data[i];
    var value = item.exp_amo;
    item.exp_amo = value * 1;
  }
  chart.source(data, {
    exp_dat: {
      type: 'time',
      mask: 'm/yy',
      tickCount: 14
    },
    exp_amo : {
      type: 'log',
      ticks: [225, 1000000 ,2000000 , 4000000, 6000000]
    }
  });
  chart.legend(false);
  chart.tooltip(true, {
    title: null,
    custom: true, // 使用自定义的 tooltip
  });
  chart.axis('exp_dat', {
    title: null,
    tickLine: null,
    titleOffset: 50,
    labels: {
      label: {
        fontSize: '14'
      }
    }
  });
  chart.axis('exp_amo', {
    tickLine: null,
    line: null,
    title: null,
    grid: {
      line: {
        'stroke-dasharray': [0, 0],
        stroke: '#999'
      }
    },
    formatter: function(val) {
      var formatted;
      if (val == 225) {
        formatted = 0;
      } else {
        formatted = val / 1000000;  
      }

return '$' + formatted + 'M';
    } 
  });
  chart.point().position('exp_dat*exp_amo').size('exp_amo', 10, 1).opacity('exp_amo').shape('circle').tooltip('exp_dat*can_nam*spe_nam*exp_amo');
  chart.render();
});
</script>

</body>
  </html>

<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.1/g2.js"></script>
      <script>
        G2.Global.setTheme('dark');
      </script>
    </head>
    <body>
      <div id="c1"></div>
      <style>
  .ac-tooltip{
    position:absolute;
    visibility:hidden;
    border : 1px solid #efefef;
    border-radius: 3px;
    background-color: white;
    opacity: .85;
    padding: 8px;
    font-size: 12px;
    transition: top 200ms,left 200ms;
    -moz-transition:  top 200ms,left 200ms;  /* Firefox 4 */
    -webkit-transition:  top 200ms,left 200ms; /* Safari 和 Chrome */
    -o-transition:  top 200ms,left 200ms;
  }
  .ac-tooltip .ac-list{
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ac-tooltip li{
    line-height:  22px; 
  }
</style>

</body>
  </html>

数据摘自