溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

自動(dòng)化自定義模板

發(fā)布時(shí)間：2020-06-28 18:42:36 來(lái)源：網(wǎng)絡(luò) 閱讀：194 作者：知止內(nèi)明 欄目：編程語(yǔ)言

http://www.ichartjs.com/samples/index.html?page=bar2d_01.html&pageno=1

自動(dòng)化自定義模板

<!DOCTYPE html>

<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script src='http://www.ichartjs.com/ichart.latest.min.js'></script>
</meta>
</head>
<body>

<div id='canvasDiv'></div>
<div id='canvasDiv1'></div>
</body>
</html>
<script>
    $(function(){
        var data = [
            {name : '通過(guò)',value : 35.75,color:'#7CFC00'},
            {name : '不通過(guò)',value : 29.84,color:'#EE0000'},
            {name : '跳過(guò)',value : 24.88,color:'#EE9572'},
        ];

        new iChart.Pie2D({
            render : 'canvasDiv',
            data: data,
            title : '國(guó)際化接口結(jié)果自動(dòng)化',
            legend : {
                enable : true
            },
            showpercent:true,
            color:'#6f6f6f',
            decimalsnum:2,
            width : 800,
            height : 400,
            radius:140

        }).draw();
    });

    $(function(){
        var data = [
            {name : 'HTML5&CSS3',value : 30,color:'#fedd74'},
            {name : 'JavaScript',value : 25,color:'#82d8ef'},
            {name : 'Java',value : 15,color:'#f76864'},
            {name : 'XML',value : 20,color:'#80bd91'},
            {name : 'PhotoShop',value : 10,color:'#fd9fc1'}
        ];

        var chart = new iChart.Donut2D({
            render : 'canvasDiv1',
            center:{
                text:'CORE\nSKILLS',
                shadow:true,
                shadow_offsetx:0,
                shadow_offsety:2,
                shadow_blur:2,
                shadow_color:'#b7b7b7',
                color:'#6f6f6f'
            },
            data: data,
            offsetx:-60,
            shadow:true,
            background_color:'#f4f4f4',
            separate_angle:10,//分離角度
            tip:{
                enable:true,
                showType:'fixed'
            },
            legend : {
                enable : true,
                shadow:true,
                background_color:null,
                border:false,
                legend_space:30,//圖例間距
                line_height:34,//設(shè)置行高
                sign_space:10,//小圖標(biāo)與文本間距
                sign_size:30,//小圖標(biāo)大小
                color:'#6f6f6f',
                fontsize:30//文本大小
            },
            sub_option:{
                label:false,
                color_factor : 0.3
            },
            showpercent:true,
            decimalsnum:2,
            width : 800,
            height : 400,
            radius:140
        });

        /**
         *利用自定義組件構(gòu)造左側(cè)說(shuō)明文本。
         */
        chart.plugin(new iChart.Custom({
            drawFn:function(){
                /**
                 *計(jì)算位置
                 */
                var y = chart.get('originy');
                /**
                 *在左側(cè)的位置，設(shè)置豎排模式渲染文字。
                 */
                chart.target.textAlign('center')
                    .textBaseline('middle')
                    .textFont('600 24px 微軟雅黑')
                    .fillText('接口自動(dòng)化',100,y,false,'#6d869f', 'tb',26,false,0,'middle');

            }
        }));

        chart.draw();
    });

</script>
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手