G2 - The Grammar Of Graphics

其他图表 / 双 Y 轴

源码

<!DOCTYPE html>
                                    <html>

<script src="https://a.alipayobjects.com/g/datavis/g2-mobile-all/2.1.7/index.js "></script>
                                    </head>

<body>
                                        <canvas id="c1" style="width:416px;height:218px;"></canvas>
                                        
                                        <script>
GM.Global.pixelRatio = 2;
var data = [
    {"time":"周一","tem":6.9,"rain":10},
    {"time":"周二","tem":9.5,"rain":13},
    {"time":"周三","tem":14.5,"rain":14},
    {"time":"周四","tem":18.2,"rain":10},
    {"time":"周五","tem":21.5,"rain":12},
    {"time":"周六","tem":25.2,"rain":16},
    {"time":"周日","tem":26.5,"rain":13},
  ];

var chart = new GM.Chart({
  id: 'c1'
});

chart.source(data, {
    tem: {
      tickCount: 5,
      max:30,
      min: 0
    },
    rain: {
        tickCount: 5,
        min: 0
    }
});

//配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('time', {
    label:{
        fontSize: 14 
    },
  grid: null
});

chart.axis('tem', {
    label:{
        fontSize: 14 
    }
});

chart.axis('rain', {
    label:{
        fontSize: 14 
    }
});

chart.interval().position('time*tem');
chart.line().position('time*rain').color('#5ed470').size(2).shape('smooth');
chart.point().position('time*rain').color('#5ed470');
chart.render();
</script>

</body>

</html>