G2 - The Grammar Of Graphics

线图 / 杭州市2010至2015年空气质量指数

选择主题

源码

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>杭州市2010至2015年空气质量指数</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>
      
      <script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.0.0/slider.js"></script>

chart.source(data, {
    date: {
      type: 'time',
      mask: 'yyyy-mm-dd',
      tickCount: 7,
      alias: '日期',
      nice: false
    },
    aqi: {
      min: 0,
      ticks: [0, 50, 100, 150, 200, 300, 500],
      alias: 'AQI(空气质量指数)'
    }
  });
  chart.axis('aqi', {
    grid: null
  });
  chart.line().position('date*aqi');
  chart.guide().rect(['min', 0], ['max', 50], {
    fill: '#5AC405',
    fillOpacity: 0.4
  });
  chart.guide().rect(['min', 50], ['max', 100], {
    fill: '#F9C709',
    fillOpacity: 0.4 
  });
  chart.guide().rect(['min', 100], ['max', 150], {
    fill: '#FD942C',
    fillOpacity: 0.4
  });
  chart.guide().rect(['min', 150], ['max', 200], {
    fill: '#e4440D',
    fillOpacity: 0.4
  });
  chart.guide().rect(['min', 200], ['max', 300], {
    fill: '#810043',
    fillOpacity: 0.4
  });
  chart.guide().rect(['min', 300], ['max', 500], {
    fill: '#45001B',
    fillOpacity: 0.4
  });

var slider = new G2.Plugin.slider({
    domId: "slider", //DOM id
    width: 1000,
    height: 26,
    xDim: 'date',
    yDim: 'aqi',
    charts: chart,
    start: '2011-06-02', // 起始原始数据
    end: '2012-03-10', // 结束原始数据
  });
  slider.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>
      <script src="https://a.alipayobjects.com/g/datavis/g2-plugin-slider/1.0.0/slider.js"></script>

</body>
  </html>

杭州市2010至2015年空气质量指数

折线图用于显示数据在一个连续的时间间隔或者时间跨度上的变化，它的特点是反映事物随时间或有序类别而变化的趋势。了解更多

数据摘自