{"id":23701124,"url":"https://github.com/ehanlin/sp-chart","last_synced_at":"2026-01-29T10:30:15.051Z","repository":{"id":21919289,"uuid":"25243508","full_name":"eHanlin/sp-chart","owner":"eHanlin","description":"SP圖表","archived":false,"fork":false,"pushed_at":"2014-10-22T03:20:36.000Z","size":156,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-02-18T01:02:04.113Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eHanlin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-15T07:24:25.000Z","updated_at":"2015-09-10T11:10:20.000Z","dependencies_parsed_at":"2022-07-27T02:47:32.534Z","dependency_job_id":null,"html_url":"https://github.com/eHanlin/sp-chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fsp-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fsp-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fsp-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eHanlin%2Fsp-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eHanlin","download_url":"https://codeload.github.com/eHanlin/sp-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239776598,"owners_count":19695139,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-30T09:32:10.729Z","updated_at":"2026-01-29T10:30:14.999Z","avatar_url":"https://github.com/eHanlin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## SP Chart\n\n## 說明\n1.依賴於 D3.js\n\n### 安裝 Install\n1. sudo npm install d3\n\n### 資料結構 Data structure\n```\nvar data = [\n\t\t\t{title: \"java\",s: 0, \t\tp:0.01}, \n           \t{title: \"地理\", s: 0.1, \t\tp:0.15},\n           \t{title: \"歷史\", s: 0.2, \t\tp:0.27},\n           \t{title: \"公民\", s: 0.3, \t\tp:0.37},\n           \t{title: \"數學\", s: 0.4, \t\tp:0.47},\n           \t{title: \"國文\", s: 0.5, \t\tp:0.57},\n           \t{title: \"英文\", s: 0.6, \t\tp:0.67},\n           \t{title: \"程式\", s: 0.75, \tp:0.74}, \n           \t{title: \"生物\", s: 0.7018992568125517, p:0.8}, \n           \t{title: \"生物\", s: 0.8, \t\tp:0.85}, \n           \t{title: \"生物\", s: 0.9, \t\tp:0.9}, \n           \t{title: \"生物\", s: 1, \t\tp:1}, \n           \t{title: \"A\", s: 1, \t\tp:0},\n           \t{title: \"A\", s: 0, \t\tp:1}\n           ];\n```\n\n### 範例 examp\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n\t\u003cmeta charset=\"utf-8\"\u003e\n\t\u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge,chrome=1\"\u003e\n\t\u003ctitle\u003esp chart\u003c/title\u003e\n\t\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\" /\u003e\n\t\u003clink rel=\"stylesheet\" href=\"./src/sp-chart.css\"/\u003e\n\t\u003cstyle\u003e\n\t\t#box{\n\t\t\twidth: 610px;\n\t\t\theight: 610px;\n\t\t}\n\t\u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003cdiv id=\"box\"\u003e\u003c/div\u003e\n\u003c/body\u003e\n\n\u003cscript src=\"./node_modules/d3/d3.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"./src/sp-chart.js\"\u003e\u003c/script\u003e\n\n\u003cscript\u003e\nvar data = [\n\t\t\t{title: \"java\",s: 0, \t\tp:0.01}, \n           \t{title: \"地理\", s: 0.1, \t\tp:0.15},\n           \t{title: \"歷史\", s: 0.2, \t\tp:0.27},\n           \t{title: \"公民\", s: 0.3, \t\tp:0.37},\n           \t{title: \"數學\", s: 0.4, \t\tp:0.47},\n           \t{title: \"國文\", s: 0.5, \t\tp:0.57},\n           \t{title: \"英文\", s: 0.6, \t\tp:0.67},\n           \t{title: \"程式\", s: 0.75, \tp:0.74}, \n           \t{title: \"生物\", s: 0.7018992568125517, p:0.8}, \n           \t{title: \"生物\", s: 0.8, \t\tp:0.85}, \n           \t{title: \"生物\", s: 0.9, \t\tp:0.9}, \n           \t{title: \"生物\", s: 1, \t\tp:1}, \n           \t{title: \"A\", s: 1, \t\tp:0},\n           \t{title: \"A\", s: 0, \t\tp:1}\n           ];\nwindow.SPChart.draw(\"#box\", data);\n//\ndraw第三個參數就是options,程式內部會自動 mix\n\u003c/script\u003e\n\u003c/html\u003e\n\n```\n\n### 設定 Configure\n```javascript\n\toptions : {\n\t\tviewBox : '0,0,610,610',\n\t\tpreserveAspectRatio : \"none\",\n\t\tchart : {width:'100%', height:'100%'},\n\t\taxisZoom : 0.85,\t\t\t\t\t\t\t\t//縮放比,1不縮放,起點會從 (0,0)開始\n\t\tzoomW : 0.9,\n\t\tzoomH : 0.7,\n\t\tmaxValue : 100,\t\t\t\t\t\t\t\t//軸的最大值\n\t\tminValue : 0,\t\t\t\t\t\t\t\t//軸的最小值\n\t\tscaleY : [0, 50, 75, 100],\t\t\t\t\t//Y軸刻度值  固定四個不要亂改\n\t\tscaleX : [0, 0.5, 1.0],\t\t\t\t\t\t//X軸刻度值  固定三個不要亂改\n\t\tradius : {rx:5, rx:5},\t\t\t\t\t\t//最外框圓角\n\t\tbackgroundColor : \"#eeeeee\",\n\t\tbackgroundOpacity : 0.8,\n\t\tbackgroundStroke : '#bdbdbd',\n\t\tbackgroundStrokeWidth : 2,\n\t\tgridStroke : \"#bdbdbd\",\t\t\t\t\t\t//網格線顏色\n\t\tgridStrokeWidth : 2,\t\t\t\t\t\t//網格線粗細\n\t\tmarkRadius : 10,\t\t\t\t\t\t\t//標記點半徑\n\t\tmarkColor : d3.scale.category20(),\t\t\t//圓點顏色\n\t\tmarkOpacity : 0.7,\n\t\tmarkShowOpacity : 1,\n\t\tmarkStroke: \"grey\",\n\t\tmarkStrokeWidth : 1,\n\t\t//SP表分類\n\t\tgenerTextList : [\n\t\t\t[\"學習穩定型\", \"粗心大意型\"],\t//A區\n\t\t\t[\"努力不足型\", \"欠缺充分型\"],\t//B區\n\t\t\t[\"學歷不足型\", \"學習異常型\"]\t\t//C區\n\t\t],\n\t\tgenerTextColor : '#757575',\t\t//類型文字顏色\n\t\tgenerTextOpacity : 0.7,\t\t\t//類型文字透明\n\t\tgenerFontSize : '20px',\t\t\t//類型文字大小\n\t\t//置中調整用\n\t\tgenerOffsetY : -20,\t\t\t\t//類型文字偏移\n\t\tgenerOffsetX : 110,\t\t\t\t//類型文字偏移\n\t\t//刻度文字\n\t\tscaleTextColor : 'black',\n\t\tscaleTextOpacity : 1,\n\t\tscaleFontSize : '14px',\n\t\t//刻度文字位置調整\n\t\t//S軸偏移\n\t\tscaleOffextY : 6,\t\t\t\t//\n\t\tscaleOffextX : -45,\n\t\t//P軸偏移\n\t\tscaleOffsetPY : 30,\n\t\tscaleOffsetPX : -6,\n\t\t//toolTip\n\t\ttipBasicOffsetX : 0,\t\t//tip 與 mark gap\n\t\ttipBasicOffsetY : -10,\n\t\ttoolTipOpacity : 0,\t\t\t//toolTip 只有  mouseOver才會顯示\n\t\ttoolTipShowOpacity : 0.9,\n\t\ttoolTipDefPoint : {x:0, y:0},\n\t\ttoolTipW : 200,\n\t\ttoolTipH : 70,\n\t\ttoolTipBgColor : \"white\",\n\t\ttoolTipStork: \"#bdbdbd\",\t//邊框\n\t\ttoolTipStrokeWidth: 1,\t\t//粗細\n\t\ttoolTipColor : \"black\",\t\t//toolTip文字顏色\n\t\ttoolTipRadius : {rx : 5, ry: 5},\n\t\ttoolTipFontSize : '14px',\n\t\ttoolTipTextOffsetX : 10,\n\t\ttoolTipTextOffsetY : 20,\n\t\ttoolTipTextGap : -2,\n\t\ttoolTipTextOffsetSX : 14,\n\t\ttoolTipTextOffsetSY : 18,\n\t\ttoolTipTextOffsetPX : 14,\n\t\ttoolTipTextOffsetPY : 18\n\t}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fsp-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehanlin%2Fsp-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehanlin%2Fsp-chart/lists"}