blockchain 和 NLP 全球搜索趋势对比

双折线图

2016年2月28日，blockchain(区块链)的搜索热度首超 NLP（自然语言处理）,之后搜索热度居高不下，在2017年12月9日达到顶峰后迅速回落。而 NLP 近年的搜索热度一直表现平平。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>blockchain 和 NLP 全球搜索趋势对比</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [30, 20, 70, 30]
    });

chart.axis('date', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      }
    });
    chart.axis('blockchain', {
      label: {
        textStyle: {
          fill: '#aaaaaa'
        }
      }
    });
    chart.axis('nlp', false);
    chart.tooltip({
      crosshairs: false
    });
    chart.legend({
      position: 'top-center'
    });

chart.source(data, {
      nlp: {
        min: 0,
        max: 100
      },
      blockchain: {
        min: 0,
        max: 100
      }
    });
    chart.line().position('date*blockchain').color('#1890ff');
    chart.line().position('date*nlp').color('#2fc25b');
    chart.guide().dataMarker({
      top: true,
      position: ['2016-02-28', 9],
      lineLength: 30,
      content: 'Blockchain 首超 NLP',
      style: {
        text: {
          textAlign: 'left',
          fontSize: 12,
          stroke: 'white',
          lineWidth: 2,
          fontWeight: 10
        },
        point: {
          stroke: '#2fc25b',
          r: 4
        }
      }
    });
    chart.guide().dataMarker({
      top: true,
      position: ['2017-12-17', 100],
      lineLength: 30,
      content: '2017-12-17, 受比特币影响，\n blockchain搜索热度达到顶峰\n峰值：100',
      style: {
        text: {
          textAlign: 'right',
          fontSize: 12,
          stroke: 'white',
          lineWidth: 2,
          fontWeight: 10
        },
        point: {
          r: 4
        },
        line: {
          stroke: '#A3B1BF',
          lineWidth: 2
        }
      }
    });
    chart.render();
  });
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height">
    <title>blockchain 和 NLP 全球搜索趋势对比</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style>
</head>
<body style="background: #1f1f1f;">
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script>
<script>G2.Global.setTheme('dark');</script>
<script>
  $.getJSON('https://gw.alipayobjects.com/os/antvdemo/assets/data/blockchain.json', function(data) {
    var chart = new G2.Chart({
      container: 'mountNode',
      forceFit: true,
      height: window.innerHeight,
      padding: [30, 20, 70, 30]
    });

图表简介

了解更多

图表用法

数据来源：Google Trends（不包括中国）

折线图

条形图

柱状图

饼图

点图

面积图

箱形图

烛形图

热力图

仪表盘

漏斗图

地图

雷达图

分面

关系图

其他图表

组件使用

图表简介

图表用法

相关链接