❤
npm
Sign UpSign In

sp-chart-v2

1.0.2 • Public • Published

SP Chart

說明

1.依賴於 D3.js

安裝 Install

  1. sudo npm install d3
  2. sudo npm jquery

資料結構 Data structure

var data = [
            {title: "java",s: 0, 		p:0.01}, 
           	{title: "地理", s: 0.1, 		p:0.15},
           	{title: "歷史", s: 0.2, 		p:0.27},
           	{title: "公民", s: 0.3, 		p:0.37},
           	{title: "數學", s: 0.4, 		p:0.47},
           	{title: "國文", s: 0.5, 		p:0.57},
           	{title: "英文", s: 0.6, 		p:0.67},
           	{title: "程式", s: 0.75, 	p:0.74}, 
           	{title: "生物", s: 0.7018992568125517, p:0.8}, 
           	{title: "生物", s: 0.8, 		p:0.85}, 
           	{title: "生物", s: 0.9, 		p:0.9}, 
           	{title: "生物", s: 1, 		p:1}, 
           	{title: "A", s: 1, 		p:0},
           	{title: "A", s: 0, 		p:1}
           ];

範例 examp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>sp chart</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="./src/sp-chart.css"/>
    <style>
        #box{
            width: 610px;
            height: 610px;
        }
    </style> 
    <script src="./node_modules/jquery/dist/jquery.min.js"></script> 
 
</head>
<body>
    <div id="box"></div>
</body>
 
<script src="./node_modules/d3/d3.min.js"></script>
<script src="./src/sp-chart-v2.js"></script>
 
<script>
var data = [
            {title: "java",s: 0, 		p:0.01}, 
           	{title: "地理", s: 0.1, 		p:0.15},
           	{title: "歷史", s: 0.2, 		p:0.27},
           	{title: "公民", s: 0.3, 		p:0.37},
           	{title: "數學", s: 0.4, 		p:0.47},
           	{title: "國文", s: 0.5, 		p:0.57},
           	{title: "英文", s: 0.6, 		p:0.67},
           	{title: "程式", s: 0.75, 	p:0.74}, 
           	{title: "生物", s: 0.7018992568125517, p:0.8}, 
           	{title: "生物", s: 0.8, 		p:0.85}, 
           	{title: "生物", s: 0.9, 		p:0.9}, 
           	{title: "生物", s: 1, 		p:1}, 
           	{title: "A", s: 1, 		p:0},
           	{title: "A", s: 0, 		p:1}
           ];
window.SP_ChartPainter.drawChart(".box", data, {sTitle : '挖哈哈'});
// 
draw第三個參數就是options,程式內部會自動 mix
</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
                chart : {width:'100%', height:'100%'},
                axisZoom : 0.85,								//縮放比,1不縮放,起點會從 (0,0)開始
                zoomW : 0.9,
                zoomH : 0.7,
                maxValue : 100,								//軸的最大值
                minValue : 0,								//軸的最小值
                scaleY : [0, 50, 75, 100],					//Y軸刻度值  固定四個不要亂改
                scaleX : [0, 0.5, 1.0],						//X軸刻度值  固定三個不要亂改
                radius : {rx:5, rx:5},						//最外框圓角
                backgroundColor : "#eeeeee",
                backgroundOpacity : 0.8,
                backgroundStroke : '#bdbdbd',
                backgroundStrokeWidth : 2,
                gridStroke : "#bdbdbd",						//網格線顏色
                gridStrokeWidth : 2,						//網格線粗細
                markRadius : 10,							//標記點半徑
                markColor : d3.scale.category20(),			//圓點顏色
                markOpacity : 0.7,
                markShowOpacity : 1,
                markStroke: "grey",
                markStrokeWidth : 1,
                //SP表分類
                generTextList : [
                    ["學習穩定型", "粗心大意型"],	//A區
                    ["努力不足型", "欠缺充分型"],	//B區
                    ["學力不足型", "學習異常型"]		//C區
                ],
                generTextColor : '#757575',		//類型文字顏色
                generTextOpacity : 0.7,			//類型文字透明
                generFontSize : '20px',			//類型文字大小
                //置中調整用
                generOffsetY : -20,				//類型文字偏移
                generOffsetX : 110,				//類型文字偏移
                //刻度文字
                scaleTextColor : 'black',
                scaleTextOpacity : 1,
                scaleFontSize : '14px',
                //刻度文字位置調整
                //S軸偏移
                scaleOffextY : 6,				//
                scaleOffextX : -45,
                //P軸偏移
                scaleOffsetPY : 30,
                scaleOffsetPX : -6,
                //toolTip
                tipBasicOffsetX : 0,		//tip 與 mark gap
                tipBasicOffsetY : -10,
                toolTipOpacity : 0,			//toolTip 只有  mouseOver才會顯示
                toolTipShowOpacity : 0.9,
                toolTipDefPoint : {x:0, y:0},
                toolTipW : 250,
                toolTipH : 70,
                toolTipBgColor : "white",
                toolTipStork: "#bdbdbd",	//邊框
                toolTipStrokeWidth: 1,		//粗細
                toolTipColor : "black",		//toolTip文字顏色
                toolTipRadius : {rx : 5, ry: 5},
                toolTipFontSize : '14px',
                toolTipTextOffsetX : 10,
                toolTipTextOffsetY : 20,
                toolTipTextGap : -2,
                toolTipTextOffsetSX : 14,
                toolTipTextOffsetSY : 18,
                toolTipTextOffsetPX : 14,
                toolTipTextOffsetPY : 18,
                pTitle : "學生的得分百分比 ：",
                sTitle : "學生注意係數 ："
            }

Dependencies (0)

    Dev Dependencies (0)

      Package Sidebar

      Install

      npm i sp-chart-v2

      Repository

      github.com/oceanTsai/sp-chart-v2

      Homepage

      github.com/oceanTsai/sp-chart-v2

      Weekly Downloads

      1

      Version

      1.0.2

      License

      none

      Last publish

      Collaborators

      • ocean
      Try on RunKit
      Report malware