アリのG 2グラフ

1、公式住所:https://antv.alipay.com/g2/doc/
2、jsを導入する:
＜script src=”https://gw.alipayobjects.com/as/g/datavis/g2/2.3.8/index.js">>スクリプト>>
3、折れ線の表:

<div style="width: 100%;float: left;margin-top: 20px;">
    <div style="width:100%;height: 400px!important;float: left;border: 1px solid #ddd;margin-right: 1%;">
        <div class="drawboxtit">         div>
        <div id="c1">div>
        <script>
            var data = ${platformSurplusMaps};
            var chart = new G2.Chart({
                id: 'c1',
                forceFit: true,
                height: 350
            });
            chart.source(data, {
                month: {
                    alias: '  ',
                    range: [0, 1]
                },
                platformSurplus: {
                    alias: '     '
                }
            });
            chart.line().position('month*platformSurplus').size(2);
            chart.point().position('month*platformSurplus').size(4).shape('circle').style({
                stroke: '#fff',
                lineWidth: 1
            });
            chart.render();

            //       
            var geom = chart.getGeoms()[0]; //        
            var items = geom.getData(); //          
            geom.setSelected(items[1]); //     

            //      
            function showOpen(text) {
                parent.layer.open({
                    type: 1,
                    content: '
' + text + '
',
                    btn: 'OK',
                    btnAlign: 'c', //    
                    yes: function (index, layero) {
                        parent.layer.close(index);
                        history.go(0);
                    }
                });
            }
        script>
    div>
div>

3、plotformSurplus Maps JSonデータなら、Listにパッケージ化する.

List