❤
npm
Sign UpSign In

radar-chart-v2

2.0.0 • Public • Published

Radar Chart V2

說明

svg 雷達圖

安裝 Install

  1. sudo npm install d3
  2. sudo npm install jquery

資料結構 Data structure

var data = [
     	[
           {title: "國文", value: 20 ,showValue : "A"}, 
           {title: "數學", value: 0	,showValue : "A"}, 
           {title: "英文", value: 10 ,showValue : "A"},  
           {title: "歷史", value: 40 ,showValue : "A"},  
           {title: "物理", value: 90 ,showValue : "A"},
           {title: "生物", value: 57 ,showValue : "A"},
           {title: "公民", value: 30 ,showValue : "A"},
           {title: "地理", value: 100,showValue : "A"}
        ],
        [
           {title: "國文", value: 100 ,showValue : "A"}, 
           {title: "數學", value: 20	,showValue : "A"}, 
           {title: "英文", value: 70 ,showValue : "A"},  
           {title: "歷史", value: 95 ,showValue : "A"},  
           {title: "物理", value: 80 ,showValue : "A"},
           {title: "生物", value: 0 ,showValue : "A"},
           {title: "公民", value: 33 ,showValue : "A"},
           {title: "地理", value: 66 ,showValue : "A"}
        ],
        [
           {title: "國文", value: 40 ,showValue : "A"}, 
           {title: "數學", value: 60	,showValue : "A"}, 
           {title: "英文", value: 72 ,showValue : "A"},  
           {title: "歷史", value: 86 ,showValue : "A"},  
           {title: "物理", value: 92 ,showValue : "A"},
           {title: "生物", value: 57 ,showValue : "A"},
           {title: "公民", value: 23 ,showValue : "A"},
           {title: "地理", value: 48 ,showValue : "A"}
        ],
        [
           {title: "國文", value: 20 ,showValue : "A"}, 
           {title: "數學", value: 10	,showValue : "A"}, 
           {title: "英文", value: 32 ,showValue : "A"},  
           {title: "歷史", value: 36 ,showValue : "A"},  
           {title: "物理", value: 22 ,showValue : "A"},
           {title: "生物", value: 37 ,showValue : "A"},
           {title: "公民", value: 0 ,showValue : "A"},
           {title: "地理", value: 99 ,showValue : "A"}
        ]
];

範例 examp

<!DOCTYPE html>
<html lang="zh-tw">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>radar chart v2</title>
    <meta name="author" content="ocean">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="./src/radar-chart-v2.css"/>
    <style>
        body{
            margin: 0px 0px;
            padding : 0px 0px;
        }
        
        div{
            margin-bottom: 10px;
        }
        
        .btnBox{
            overflow: hidden;
        }
        
        .container{
            width: 600px;
            height:600px;
            background-color: #eeeeee;
        }
        
        .areaBtn div, .areaBtn button, .areaBtn input{
            float : left;
            width: 100px;
            height: 25px;
            margin-left: 10px;
        }
 
        
    </style> 
</head>
<body>
    <div class="container" id="top"></div>
    <div class='btnBox'>
        <div class='areaBtn'>
            <input id="oneSilder" type="range" min="300" max="900" value="600" />
            <button id="oneNext">next</button>
            <button id="oneBreak">Break</button>
        </div>
    </div>
    
    <div class="container" id="bottom"></div>
    <div class='btnBox'>
        <div class='areaBtn'>
            <input id="twoSilder" type="range" min="300" max="900" value="600" />
            <button id="twoNext">next</button>
            <button id="twoBreak">Break</button>
        </div>
    </div>
    
    
    <div id="radarChart"></div>
 
</body>
<script src="./node_modules/d3/d3.min.js"></script>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./src/radar-chart-v2.js"></script>
 
<script>
var data = [
     	[
           {title: "國文", value: 20 }, 
           {title: "數學", value: 0	}, 
           {title: "英文", value: 10 },  
           {title: "歷史", value: 40 },  
           {title: "物理", value: 90 },
           {title: "生物", value: 57 },
           {title: "公民", value: 30 },
           {title: "地理", value: 100}
        ],
        [
           {title: "國文", value: 100 }, 
           {title: "數學", value: 20	}, 
           {title: "英文", value: 70 },  
           {title: "歷史", value: 95 },  
           {title: "物理", value: 80 },
           {title: "生物", value: 0 },
           {title: "公民", value: 33 },
           {title: "地理", value: 66 }
        ],
        [
           {title: "國文", value: 40 }, 
           {title: "數學", value: 60	}, 
           {title: "英文", value: 72 },  
           {title: "歷史", value: 86 },  
           {title: "物理", value: 92 },
           {title: "生物", value: 57 },
           {title: "公民", value: 23 },
           {title: "地理", value: 48 }
        ],
        [
           {title: "國文", value: 20 }, 
           {title: "數學", value: 10	}, 
           {title: "英文", value: 32 },  
           {title: "歷史", value: 36 },  
           {title: "物理", value: 22 },
           {title: "生物", value: 37 },
           {title: "公民", value: 0 },
           {title: "地理", value: 99 }
        ]
];
 
var painter = window.RaderPainter;
var elements = painter.drawChart('.container', data, {scaleUnit : ' 分'});
 
$('#oneNext').click(function(){
    painter.nextArea($('svg')[0]);
});
 
$('#oneBreak').click(function(){
    painter.breakArea($('svg')[0]);
});
 
 
$('#twoNext').click(function(){
    painter.nextArea($('svg')[1]);
});
 
$('#twoBreak').click(function(){
    painter.breakArea($('svg')[1]);
});
 
 
 
var colorBlockClick = function(){
    painter.insertLast(this['area']);
};
// 
$('.areaBtn').each(function(index, element){
    var svg = $('svg')[index];
    var areaList = $(svg).find('.area-box').children();
    for(var i=0, len=data.length ; i < len ; i++){
        var container = $(element).append('<div></div>');
        var color = painter.getAreaColor('.container',i);
        var colorBlock = container.find('div').last().css({'background': color});
        colorBlock[0]['area'] = areaList[i];	//bind html element
        colorBlock.click(colorBlockClick);
    }	
});
 
$('#oneSilder').change(function(){
    var value = $(this).val()+'px';
    $('.container').first().width(value).height(value);
});
 
$('#twoSilder').change(function(){
    var value = $(this).val()+'px';
    $('.container').last().width(value).height(value);
});
 
</script> 
</html>
 
 

設定 Configure

defaultOption = {
                //stage
                viewPort : '100%, 100%',		//svg長寬。 width height
                viewBox : '0,0,600,600',		//svg選擇顯示範圍，如同攝影機的攝影範圍。 x,y,width,height
                preserveAspectRatio : "none",	//svg zoom mode
                //vertical
                visibleVerticalWeb : true,		//是否呈現雷達圖垂直網
                verticalZoom : 0.76,				//縱軸縮放值
                verticalAxisLength : 0,			//縱軸長
                verticalStyle : AXIS_TYPE.DASH,	//
                maxValue : 100,					//縱軸上的最大值
                minValue : 0,					//縱軸上的最小值
                //horizontal
                visibleHorizontalWeb : true,	//是否呈現雷達圖橫網
                horizontalStyle : AXIS_TYPE.DASH,
                //scale
                scale : 10,						//縱軸刻度數
                visibleScale : true,			//是否要呈現刻度
                scaleFontDx : 3,				//刻度文字水平偏移
                scaleFontDy : 0,				//刻度文字垂直偏移
                scaleFontColor : 'black',		//刻度文字顏色
                scaleFontSize : 14,				//刻度文字大小
                scaleUnit : '%',				//單位顯示
                //area
                visibleArea : true,				//是否呈現各點的區塊連接
                areaColor : '#FFEB3B, #673AB7, #4CAF50, #FF9800, #9C27B0, #3F51B5, #8BC34A, #E91E63, #795548, #009688',
                //mark
                visibleMark : true,				//是否呈現標記點
                markType : MARK_TYPE.CIRCLE,	//預設標記點樣式
                markRadius : 7,					//標記半徑
                //public prpoerty
                dx : 0,							//繪製參考點水平偏移量
                dy : 0,							//繪製參考點垂直偏移量
                layer : 5,						//橫網層數
                centerType : CENTER_TYPE.DOUNT,	//雷達網中心要呈現的樣式
                centerRadius : 25,				//中心點半徑
                //system auto calculate (系統會自動計算的欄位)
                pointCount : 0,
                onePiece : 0,
                //假設值
                //title
                surmiseFontGap: 3,				//假設的font gap
                verticalAxisTitleGap : 6,
                //follow mouse icon
                visibleFollowIcon : false,		//是否呈現跟隨滑鼠笑果
                followIcon : '',				//svg path
                //information panel
                visibleInfoPanel :true,
                infoPanelWidth: 70,
                infoPanelHeight :24,
                infoPanelRadiusX :5,			//面板的圓角
                infoPanelRadiusY :5,
                infoPanelhorizontalGap : 10,
                infoPanelverticalGap :10,
                infoLeftPadding : 3,
                infoTopPadding : 4,
            };

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.0
    0
    • latest

Version History

Package Sidebar

Install

npm i radar-chart-v2

Repository

github.com/oceanTsai/radar-chart-v2

Homepage

github.com/oceanTsai/radar-chart-v2

Weekly Downloads

0

Version

2.0.0

License

none

Last publish

Collaborators

  • ocean
Try on RunKit
Report malware