Chart图表整合——面积对比图、扇形图、柱状图

一. chart图表demo网址

二. 本文主要对面积对比图，扇形图，柱状图三大常见图进行介绍

效果图如下：

Meta

    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="instrument-panel"</span><span style="color: #0000ff"&gt;></span>
          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="panel-con"</span><span style="color: #0000ff"&gt;></span>                 
                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="panel-linear"</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;canvas </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="linear"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;canvas</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="consumption"</span><span style="color: #0000ff"&gt;></span>
                                <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>-库存消耗<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                 <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="panel-other"</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="panel-pancake"</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;canvas </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="mountNode"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;canvas</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="product-proportion"</span><span style="color: #0000ff"&gt;></span>
                                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>-产品占比<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="panel-columnar"</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;canvas </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="columnar"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;canvas</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="user-map"</span><span style="color: #0000ff"&gt;></span>
                                          <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>-本月<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a>示意图<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;p</span><span style="color: #0000ff"&gt;></span>
                                 <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                          <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
                 <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>                
          <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;body</span><span style="color: #0000ff"&gt;></span>

</html>

我们在html页面内加入三个画布标签canvas，插入面积对比图，扇形图，柱状图；

css代码：

{:;:;:; }.instrument-panel .panel-con{
width: 90%;
height: 720px;
display: flex;
flex-direction: column;
align-items: center;
margin: 65px 0px;
}

.instrument-panel .panel-con .panel-linear{
width: 100%;
height: 340px;
background-color: #fff;
margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.panel-linear .consumption{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}

.panel-linear canvas{
width: 80%;
height: 300px;
}

.instrument-panel .panel-con .panel-other{
width: 100%;
height: 340px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}

.panel-con .panel-other .panel-pancake{
width: 48.5%;
height: 340px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.panel-pancake canvas{
width: 70%;
height: 340px;
}

.panel-pancake .product-proportion{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}

.panel-con .panel-other .panel-columnar{
width: 48.5%;
height: 340px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}

.panel-columnar canvas{
width: 70%;
height: 220px;
margin-top: 40px;
}

.panel-columnar .user-map{
position: absolute;
left: 24px;
top: 44px;
color: #333;
font-size: 18px;
}

重点来了，我们使用ajax接口数据实时监测数据的变化，并呈现在图表上面

三. 接口数据形式

{"state": 200,"result": [{"goodsId": 1,"sum": 0,"creatTime": "2018-08-31"},{"goodsId": 2,{"goodsId": 1,"creatTime": "2018-09-01"},"sum": 1,"creatTime": "2018-09-02"},"creatTime": "2018-09-03"},"creatTime": "2018-09-04"},"creatTime": "2018-09-05"},"creatTime": "2018-09-06"},"creatTime": "2018-09-07"},"creatTime": "2018-09-08"},"creatTime": "2018-09-09"},"creatTime": "2018-09-10"},"creatTime": "2018-09-11"},"creatTime": "2018-09-12"},"creatTime": "2018-09-13"},"sum": 4,"creatTime": "2018-09-14"},"creatTime": "2018-09-15"},"creatTime": "2018-09-15"}]}

2.扇形图：

{"state": 200,"result": [{"goodsId": 2,"sum": 4},"sum": 2}]}

3.柱状图：

{"state": 200,"result": {"sum_lastmonth": 6,"marked": 4,"unmarked": 2}}

js代码：

$( pancake(); columnar(); function linear() {

</span><span style="color: #0000ff"&gt;var</span> sellerId = getCookie("sellerId"<span style="color: #000000"&gt;);
</span><span style="color: #0000ff"&gt;var</span> sellerId =<span style="color: #000000"&gt; {
    </span>"sellerId"<span style="color: #000000"&gt;: sellerId,}

$.ajax({
    url: </span>"https://www.xxxxxx.cn/xxxxx/xxxxx/",<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;15天<a href="/tag/xinyonghu/" target="_blank" class="keywords">新用户</a><a href="/tag/tongji/" target="_blank" class="keywords">统计</a></span>

data: sellerId,type: "get",success: function(data) {

        </span><span style="color: #0000ff"&gt;var</span> newclient =<span style="color: #000000"&gt; JSON.parse(data).result;

// console.log(newclient);

        <span style="color: #0000ff"&gt;for</span>(<span style="color: #0000ff"&gt;var</span> i=0;i<newclient.length;i++<span style="color: #000000"&gt;){
            newclient[i].creatTime</span>=newclient[i].creatTime.slice(0,10<span style="color: #000000"&gt;);
            newclient[i].goodsId</span>=(newclient[i].goodsId+'').replace('1','格林童话'<span style="color: #000000"&gt;);
            newclient[i].goodsId</span>=(newclient[i].goodsId+'').replace('2','阿里巴巴与四十大盗'<span style="color: #000000"&gt;);
        }
        </span><span style="color: #0000ff"&gt;var</span> data=<span style="color: #000000"&gt;newclient;

// console.log(data);
var chart = new F2.Chart({
id: 'linear',pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.scale('creatTime',{
tickCount: 15
});
chart.scale('sum',{
tickCount: 6
});
chart.axis('creatTime',{
label: {
fontSize:12
}
});
chart.area().position('creatTimesum').color('goodsId',['#2196F3','#DD6666']).shape('smooth');
chart.line().position('creatTimesum').color('goodsId','#DD6666']).shape('smooth');
chart.render();

    },error: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() {

    }
})

}

function pancake() {

</span><span style="color: #0000ff"&gt;var</span> sellerId = getCookie("sellerId"<span style="color: #000000"&gt;);
</span><span style="color: #0000ff"&gt;var</span> sellerId =<span style="color: #000000"&gt; {
    </span>"sellerId"<span style="color: #000000"&gt;: sellerId,}

$.ajax({
    url: </span>"https://www.xxxxxxx.cn/xxxxxx/xxxxxxx/",<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;报告种类<a href="/tag/tongji/" target="_blank" class="keywords">统计</a></span>

data: sellerId,success: function(data) {
//打印出数组
var bookresult=JSON.parse(data).result;
var sums=0;
for(var i=0;i<bookresult.length;i++){
bookresult[i].goodsId=(bookresult[i].goodsId+'').replace('1','格林童话');
bookresult[i].goodsId=(bookresult[i].goodsId+'').replace('2','阿里巴巴与四十大盗');
sums+=bookresult[i].sum;
}
// console.log(sums)
var data=bookresult;

        </span><span style="color: #0000ff"&gt;var</span> map =<span style="color: #000000"&gt; {};
        data.map(</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;(obj) {
            map[obj.goodsId] </span>= Math.round((obj.sum)/sums*100) + '%';

});

        </span><span style="color: #0000ff"&gt;var</span> chart = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; F2.Chart({
            id: </span>'mountNode'<span style="color: #000000"&gt;,pixelRatio: window.devicePixelRatio,padding: [</span>20,'auto'<span style="color: #000000"&gt;]
        });
        chart.source(data,{
            sum: {
                formatter: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; formatter(val) {
                    </span><span style="color: #0000ff"&gt;return</span> val + '%'<span style="color: #000000"&gt;;
                }
            }
        });
        chart.tooltip(</span><span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;);
        chart.legend({
            position: </span>'right'<span style="color: #000000"&gt;,itemFormatter: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; itemFormatter(val) {
                </span><span style="color: #0000ff"&gt;return</span> val + '    ' +<span style="color: #000000"&gt; map[val];
            }
        });
        chart.coord(</span>'polar'<span style="color: #000000"&gt;,{
            transposed: </span><span style="color: #0000ff"&gt;true</span><span style="color: #000000"&gt;,innerRadius: </span>0.6<span style="color: #000000"&gt;,radius: </span>0.85<span style="color: #000000"&gt;
        });
        chart.axis(</span><span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;);
        chart.interval().position(</span>'a*sum').color('goodsId','#3DC1C7']).adjust('stack'<span style="color: #000000"&gt;);

        chart.guide().html({
            position: [</span>'50%','46%'<span style="color: #000000"&gt;],html: </span>'<div style="width: 250px;height: 40px;text-align: center;"&gt;' + '<div style="font-size: 16px"&gt;总<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a></div>' + '<div style="font-size: 24px"&gt;'+sums+'</div>' + '</div>'<span style="color: #000000"&gt;
        });    

        chart.render();

    },error: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() {

    }
})

}

function columnar() {

</span><span style="color: #0000ff"&gt;var</span> sellerId = getCookie("sellerId"<span style="color: #000000"&gt;);
</span><span style="color: #0000ff"&gt;var</span> sellerId =<span style="color: #000000"&gt; {
    </span>"sellerId"<span style="color: #000000"&gt;: sellerId,}

$.ajax({
    url: </span>"https://www.xxxxxxx.cn/xxxxx/xxxxxxx/",<span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;近一个月<a href="/tag/yonghu/" target="_blank" class="keywords">用户</a> <a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>与未<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a><a href="/tag/tongji/" target="_blank" class="keywords">统计</a></span>

data: sellerId,success: function(data) {

        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>最近30天新增客户数</span>
        <span style="color: #0000ff"&gt;var</span> addperson =<span style="color: #000000"&gt; JSON.parse(data).result.sum_lastmonth;
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>未<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>客户数</span>
        <span style="color: #0000ff"&gt;var</span> unmark =<span style="color: #000000"&gt; JSON.parse(data).result.unmarked;
        </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt;<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>已<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>客户数</span>
        <span style="color: #0000ff"&gt;var</span> mark =<span style="color: #000000"&gt; JSON.parse(data).result.marked;

        </span><span style="color: #0000ff"&gt;var</span> data =<span style="color: #000000"&gt; [{
            sign: </span>'最近30天新增客户数'<span style="color: #000000"&gt;,quality: addperson
        },{
            sign: </span>'未<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>客户数'<span style="color: #000000"&gt;,quality: unmark
        },{
            sign: </span>'已<a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>客户数'<span style="color: #000000"&gt;,quality: mark
        }];
        </span><span style="color: #0000ff"&gt;var</span> chart = <span style="color: #0000ff"&gt;new</span><span style="color: #000000"&gt; F2.Chart({
            id: </span>'columnar'<span style="color: #000000"&gt;,pixelRatio: window.devicePixelRatio
        });

        chart.source(data,{
            quality: {
                tickCount: </span>5<span style="color: #000000"&gt;
            }
        });
        chart.tooltip({
            showItemMarker: </span><span style="color: #0000ff"&gt;false</span><span style="color: #000000"&gt;,onShow: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; onShow(ev) {
                </span><span style="color: #0000ff"&gt;var</span> items =<span style="color: #000000"&gt; ev.items;
                items[</span>0].name = <span style="color: #0000ff"&gt;null</span><span style="color: #000000"&gt;;
                items[</span>0].name = items[0<span style="color: #000000"&gt;].title;
            }
        });
        chart.axis(</span>'sign'<span style="color: #000000"&gt;,{
            label: {
               fontSize:</span>12<span style="color: #000000"&gt;
            }
        });
        chart.interval().position(</span>'sign*quality').color('sign',['#3DC1C7','#FCBD44','#DD6666'<span style="color: #000000"&gt;]);
        chart.render();

    },error: </span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt;() {

    }
})

}

有什么不懂的欢迎在下面留言，一起进步。。。。。。

Chart图表整合——面积对比图、扇形图、柱状图

猜你在找的JavaScript相关文章