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>
var data = [
  {month: 'Jan', temperature: 7.0},
  {month: 'Feb', temperature: 6.9},
  {month: 'Mar', temperature: 9.5},
  {month: 'Apr', temperature: 14.5},
  {month: 'May', temperature: 18.2},
  {month: 'Jun', temperature: 21.5},
  {month: 'Jul', temperature: 25.2},
  {month: 'Aug', temperature: 26.5},
  {month: 'Sep', temperature: 23.3},
  {month: 'Oct', temperature: 18.3},
  {month: 'Nov', temperature: 13.9},
  {month: 'Dec', temperature: 9.6}
];

var chart = new G2.Chart({
  id: 'c1',
  forceFit: true,
  height: 450
});

chart.source(data, {
  month: {
    alias: '月份',
    range: [0, 1]
  },
  temperature: {
    alias: '平均温度(°C)'
  }
});
chart.line().position('month*temperature').size(2);
chart.render();
</script>


      </body>
    </html>
          
        

简单线图

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

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>简单线图</title>
        <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
        <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
        <script src="https://a.alipayobjects.com/g/datavis/g2/2.3.13/g2.js"></script>
        <script src="https://unpkg.com/g2-react@1.2.0/dist/index.js"></script>
        <script src="https://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/babel">
    const Chart = createG2(chart => {
      chart.col('month', {
        alias: '月份',
        range: [0, 1]
      });
      chart.col('temperature', {
        alias: '平均温度(°C)'
      });
      chart.line().position('month*temperature').size(2);
      chart.render();
    });

const MyComponent = React.createClass({
      getInitialState() {
        return {
          data: [
            {month: 'Jan', temperature: 7.0},
            {month: 'Feb', temperature: 6.9},
            {month: 'Mar', temperature: 9.5},
            {month: 'Apr', temperature: 14.5},
            {month: 'May', temperature: 18.2},
            {month: 'Jun', temperature: 21.5},
            {month: 'Jul', temperature: 25.2},
            {month: 'Aug', temperature: 26.5},
            {month: 'Sep', temperature: 23.3},
            {month: 'Oct', temperature: 18.3},
            {month: 'Nov', temperature: 13.9},
            {month: 'Dec', temperature: 9.6}
          ],
          forceFit: true,
          width: 500,
          height: 450
        };
      },
      render() {
        return (
          <div>
            <Chart
              data={this.state.data}
              width={this.state.width}
              height={this.state.height}
              forceFit={this.state.forceFit} />
          </div>
        );
      },
    });
    ReactDOM.render(<MyComponent />, document.getElementById('c1'));
</script>

</body>
    </html>