[{"data":1,"prerenderedAt":799},["ShallowReactive",2],{"\u002Fblog\u002Fzh-tw\u002Fplotlyjs":3,"\u002Fblog\u002Fzh-tw\u002Fplotlyjs-surround":793},{"id":4,"title":5,"authors":6,"badge":11,"body":12,"date":783,"description":784,"extension":785,"image":786,"meta":788,"navigation":187,"path":789,"seo":790,"stem":791,"__hash__":792},"posts\u002Fblog\u002Fzh-TW\u002FplotlyJs.md","Vue3 Vite+Javascript引用Plotly.js實作統計圖表-以P-chart不良率管制圖為例",[7],{"name":8,"avatar":9},"Neil Tsai",{"src":10},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F12755093?v=4&size=64",null,{"type":13,"value":14,"toc":781},"minimark",[15,19,22,33,36,42,45,48,51,54,57,66,69,134,738,749,757,760,763,771,777],[16,17,18],"p",{},"由於開發產品或專案上的需要，會需要用到套件Plotly.js，並實作統計管制圖，以下以製作簡單的統計管制圖P-chart為例。",[16,20,21],{},"首先開啟命令提示字元輸入建立新Vue3專案，程式語言選擇Javascript。",[23,24,29],"pre",{"className":25,"code":27,"language":28},[26],"language-text","npm create vite@latest\n","text",[30,31,27],"code",{"__ignoreMap":32},"",[16,34,35],{},"打開Visaul Studio Code的終端機輸入指令如下安裝plotly.js",[23,37,40],{"className":38,"code":39,"language":28},[26],"npm i plotly.js\n",[30,41,39],{"__ignoreMap":32},[16,43,44],{},"SPC(統計製程管制)的 P-chart(不良率管制圖)， (簡稱：P 管制圖)，必須有4條線如下：",[16,46,47],{},"中心線 CL(Center Line)",[16,49,50],{},"管制上限 UCL",[16,52,53],{},"管制下限 LCL",[16,55,56],{},"不良率",[16,58,59,60],{},"公式 參考 ",[61,62,63],"a",{"href":63,"rel":64},"https:\u002F\u002Fwww.itl.nist.gov\u002Fdiv898\u002Fhandbook\u002Fpmc\u002Fsection3\u002Fpmc332.htm?utm_source=chatgpt.com",[65],"nofollow",[16,67,68],{},"繪製圖表之參考程式碼範例：",[23,70,74],{"className":71,"code":72,"language":73,"meta":32,"style":32},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Cdiv ref=\"chart\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","html",[30,75,76,92,124],{"__ignoreMap":32},[77,78,81,85,89],"span",{"class":79,"line":80},"line",1,[77,82,84],{"class":83},"sMK4o","\u003C",[77,86,88],{"class":87},"swJcz","template",[77,90,91],{"class":83},">\n",[77,93,95,98,101,105,108,111,115,117,120,122],{"class":79,"line":94},2,[77,96,97],{"class":83},"  \u003C",[77,99,100],{"class":87},"div",[77,102,104],{"class":103},"spNyl"," ref",[77,106,107],{"class":83},"=",[77,109,110],{"class":83},"\"",[77,112,114],{"class":113},"sfazB","chart",[77,116,110],{"class":83},[77,118,119],{"class":83},">\u003C\u002F",[77,121,100],{"class":87},[77,123,91],{"class":83},[77,125,127,130,132],{"class":79,"line":126},3,[77,128,129],{"class":83},"\u003C\u002F",[77,131,88],{"class":87},[77,133,91],{"class":83},[23,135,139],{"className":136,"code":137,"language":138,"meta":32,"style":32},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\nimport { onMounted, ref } from 'vue';\n\nconst chart = ref(null);\n\nvar ucl = {\n  x: [1, 2, 3, 4, 5],\n  y: [9.88, 9.88, 9.88, 9.88, 9.88],\n  mode: 'lines',\n  name: 'UCL管制上限',\n};\n\nvar cl = {\n  x: [1, 2, 3, 4, 5],\n  y: [3, 3, 3, 3, 3],\n  mode: 'lines',\n  name: 'CL中心線',\n};\n\nvar lcl = {\n  x: [1, 2, 3, 4, 5],\n  y: [0, 0, 0, 0, 0],\n  mode: 'lines',\n  name: 'LCL管制下限',\n};\n\nvar values = {\n  x: [1, 2, 3, 4, 5],\n  y: [3, 2, 4, 2, 3],\n  mode: 'lines+markers',\n  name: '不良率(%)',\n};\n\nvar data = [ucl, cl, lcl, values];\n\nvar layout = {\n  title: { text: 'P-Chart' },\n};\n\nonMounted(() => {\n  Plotly.newPlot(chart.value, data, layout);\n});\n\u003C\u002Fscript>\n","js",[30,140,141,153,159,182,189,195,200,209,245,275,291,306,314,319,327,354,382,395,409,416,421,429,456,485,498,512,519,524,532,559,586,600,614,621,626,632,637,645,670,677,682,690,721,729],{"__ignoreMap":32},[77,142,143,145,148,151],{"class":79,"line":80},[77,144,84],{"class":83},[77,146,147],{"class":87},"script",[77,149,150],{"class":103}," setup",[77,152,91],{"class":83},[77,154,155],{"class":79,"line":94},[77,156,158],{"class":157},"sTEyZ","import Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\n",[77,160,161,164,167,170,173,176,179],{"class":79,"line":126},[77,162,163],{"class":157},"import ",[77,165,166],{"class":83},"{",[77,168,169],{"class":157}," onMounted",[77,171,172],{"class":83},",",[77,174,175],{"class":157}," ref ",[77,177,178],{"class":83},"}",[77,180,181],{"class":157}," from 'vue';\n",[77,183,185],{"class":79,"line":184},4,[77,186,188],{"emptyLinePlaceholder":187},true,"\n",[77,190,192],{"class":79,"line":191},5,[77,193,194],{"class":157},"const chart = ref(null);\n",[77,196,198],{"class":79,"line":197},6,[77,199,188],{"emptyLinePlaceholder":187},[77,201,203,206],{"class":79,"line":202},7,[77,204,205],{"class":157},"var ucl = ",[77,207,208],{"class":83},"{\n",[77,210,212,215,219,221,224,226,229,231,234,236,239,242],{"class":79,"line":211},8,[77,213,214],{"class":157},"  x: [",[77,216,218],{"class":217},"sbssI","1",[77,220,172],{"class":83},[77,222,223],{"class":217}," 2",[77,225,172],{"class":83},[77,227,228],{"class":217}," 3",[77,230,172],{"class":83},[77,232,233],{"class":217}," 4",[77,235,172],{"class":83},[77,237,238],{"class":217}," 5",[77,240,241],{"class":157},"]",[77,243,244],{"class":83},",\n",[77,246,248,251,254,256,259,261,263,265,267,269,271,273],{"class":79,"line":247},9,[77,249,250],{"class":157},"  y: [",[77,252,253],{"class":217},"9.88",[77,255,172],{"class":83},[77,257,258],{"class":217}," 9.88",[77,260,172],{"class":83},[77,262,258],{"class":217},[77,264,172],{"class":83},[77,266,258],{"class":217},[77,268,172],{"class":83},[77,270,258],{"class":217},[77,272,241],{"class":157},[77,274,244],{"class":83},[77,276,278,281,284,287,289],{"class":79,"line":277},10,[77,279,280],{"class":157},"  mode: ",[77,282,283],{"class":83},"'",[77,285,286],{"class":113},"lines",[77,288,283],{"class":83},[77,290,244],{"class":83},[77,292,294,297,299,302,304],{"class":79,"line":293},11,[77,295,296],{"class":157},"  name: ",[77,298,283],{"class":83},[77,300,301],{"class":113},"UCL管制上限",[77,303,283],{"class":83},[77,305,244],{"class":83},[77,307,309,311],{"class":79,"line":308},12,[77,310,178],{"class":83},[77,312,313],{"class":157},";\n",[77,315,317],{"class":79,"line":316},13,[77,318,188],{"emptyLinePlaceholder":187},[77,320,322,325],{"class":79,"line":321},14,[77,323,324],{"class":157},"var cl = ",[77,326,208],{"class":83},[77,328,330,332,334,336,338,340,342,344,346,348,350,352],{"class":79,"line":329},15,[77,331,214],{"class":157},[77,333,218],{"class":217},[77,335,172],{"class":83},[77,337,223],{"class":217},[77,339,172],{"class":83},[77,341,228],{"class":217},[77,343,172],{"class":83},[77,345,233],{"class":217},[77,347,172],{"class":83},[77,349,238],{"class":217},[77,351,241],{"class":157},[77,353,244],{"class":83},[77,355,357,359,362,364,366,368,370,372,374,376,378,380],{"class":79,"line":356},16,[77,358,250],{"class":157},[77,360,361],{"class":217},"3",[77,363,172],{"class":83},[77,365,228],{"class":217},[77,367,172],{"class":83},[77,369,228],{"class":217},[77,371,172],{"class":83},[77,373,228],{"class":217},[77,375,172],{"class":83},[77,377,228],{"class":217},[77,379,241],{"class":157},[77,381,244],{"class":83},[77,383,385,387,389,391,393],{"class":79,"line":384},17,[77,386,280],{"class":157},[77,388,283],{"class":83},[77,390,286],{"class":113},[77,392,283],{"class":83},[77,394,244],{"class":83},[77,396,398,400,402,405,407],{"class":79,"line":397},18,[77,399,296],{"class":157},[77,401,283],{"class":83},[77,403,404],{"class":113},"CL中心線",[77,406,283],{"class":83},[77,408,244],{"class":83},[77,410,412,414],{"class":79,"line":411},19,[77,413,178],{"class":83},[77,415,313],{"class":157},[77,417,419],{"class":79,"line":418},20,[77,420,188],{"emptyLinePlaceholder":187},[77,422,424,427],{"class":79,"line":423},21,[77,425,426],{"class":157},"var lcl = ",[77,428,208],{"class":83},[77,430,432,434,436,438,440,442,444,446,448,450,452,454],{"class":79,"line":431},22,[77,433,214],{"class":157},[77,435,218],{"class":217},[77,437,172],{"class":83},[77,439,223],{"class":217},[77,441,172],{"class":83},[77,443,228],{"class":217},[77,445,172],{"class":83},[77,447,233],{"class":217},[77,449,172],{"class":83},[77,451,238],{"class":217},[77,453,241],{"class":157},[77,455,244],{"class":83},[77,457,459,461,464,466,469,471,473,475,477,479,481,483],{"class":79,"line":458},23,[77,460,250],{"class":157},[77,462,463],{"class":217},"0",[77,465,172],{"class":83},[77,467,468],{"class":217}," 0",[77,470,172],{"class":83},[77,472,468],{"class":217},[77,474,172],{"class":83},[77,476,468],{"class":217},[77,478,172],{"class":83},[77,480,468],{"class":217},[77,482,241],{"class":157},[77,484,244],{"class":83},[77,486,488,490,492,494,496],{"class":79,"line":487},24,[77,489,280],{"class":157},[77,491,283],{"class":83},[77,493,286],{"class":113},[77,495,283],{"class":83},[77,497,244],{"class":83},[77,499,501,503,505,508,510],{"class":79,"line":500},25,[77,502,296],{"class":157},[77,504,283],{"class":83},[77,506,507],{"class":113},"LCL管制下限",[77,509,283],{"class":83},[77,511,244],{"class":83},[77,513,515,517],{"class":79,"line":514},26,[77,516,178],{"class":83},[77,518,313],{"class":157},[77,520,522],{"class":79,"line":521},27,[77,523,188],{"emptyLinePlaceholder":187},[77,525,527,530],{"class":79,"line":526},28,[77,528,529],{"class":157},"var values = ",[77,531,208],{"class":83},[77,533,535,537,539,541,543,545,547,549,551,553,555,557],{"class":79,"line":534},29,[77,536,214],{"class":157},[77,538,218],{"class":217},[77,540,172],{"class":83},[77,542,223],{"class":217},[77,544,172],{"class":83},[77,546,228],{"class":217},[77,548,172],{"class":83},[77,550,233],{"class":217},[77,552,172],{"class":83},[77,554,238],{"class":217},[77,556,241],{"class":157},[77,558,244],{"class":83},[77,560,562,564,566,568,570,572,574,576,578,580,582,584],{"class":79,"line":561},30,[77,563,250],{"class":157},[77,565,361],{"class":217},[77,567,172],{"class":83},[77,569,223],{"class":217},[77,571,172],{"class":83},[77,573,233],{"class":217},[77,575,172],{"class":83},[77,577,223],{"class":217},[77,579,172],{"class":83},[77,581,228],{"class":217},[77,583,241],{"class":157},[77,585,244],{"class":83},[77,587,589,591,593,596,598],{"class":79,"line":588},31,[77,590,280],{"class":157},[77,592,283],{"class":83},[77,594,595],{"class":113},"lines+markers",[77,597,283],{"class":83},[77,599,244],{"class":83},[77,601,603,605,607,610,612],{"class":79,"line":602},32,[77,604,296],{"class":157},[77,606,283],{"class":83},[77,608,609],{"class":113},"不良率(%)",[77,611,283],{"class":83},[77,613,244],{"class":83},[77,615,617,619],{"class":79,"line":616},33,[77,618,178],{"class":83},[77,620,313],{"class":157},[77,622,624],{"class":79,"line":623},34,[77,625,188],{"emptyLinePlaceholder":187},[77,627,629],{"class":79,"line":628},35,[77,630,631],{"class":157},"var data = [ucl, cl, lcl, values];\n",[77,633,635],{"class":79,"line":634},36,[77,636,188],{"emptyLinePlaceholder":187},[77,638,640,643],{"class":79,"line":639},37,[77,641,642],{"class":157},"var layout = ",[77,644,208],{"class":83},[77,646,648,651,653,656,659,662,665,667],{"class":79,"line":647},38,[77,649,650],{"class":157},"  title: ",[77,652,166],{"class":83},[77,654,655],{"class":87}," text",[77,657,658],{"class":83},":",[77,660,661],{"class":83}," '",[77,663,664],{"class":113},"P-Chart",[77,666,283],{"class":83},[77,668,669],{"class":83}," },\n",[77,671,673,675],{"class":79,"line":672},39,[77,674,178],{"class":83},[77,676,313],{"class":157},[77,678,680],{"class":79,"line":679},40,[77,681,188],{"emptyLinePlaceholder":187},[77,683,685,688],{"class":79,"line":684},41,[77,686,687],{"class":157},"onMounted(() => ",[77,689,208],{"class":83},[77,691,693,696,699,703,706,708,711,713,716,718],{"class":79,"line":692},42,[77,694,695],{"class":157},"  Plotly",[77,697,698],{"class":83},".",[77,700,702],{"class":701},"s2Zo4","newPlot",[77,704,705],{"class":157},"(chart",[77,707,698],{"class":83},[77,709,710],{"class":157},"value",[77,712,172],{"class":83},[77,714,715],{"class":157}," data",[77,717,172],{"class":83},[77,719,720],{"class":157}," layout);\n",[77,722,724,726],{"class":79,"line":723},43,[77,725,178],{"class":83},[77,727,728],{"class":157},");\n",[77,730,732,734,736],{"class":79,"line":731},44,[77,733,129],{"class":83},[77,735,147],{"class":87},[77,737,91],{"class":83},[16,739,740,741],{},"結果如下圖：\n",[742,743],"img",{"alt":744,"className":745,"height":747,"src":748,"width":747},"Plotly.js畫出的基本P-Chart",[746],"rounded-lg",800,"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FbasicPChart.png",[16,750,751,752],{},"還有更進階的實例，如果遇到不良率超過管制上限時會顯示紅點與紅線警示如下圖：\n",[742,753],{"alt":754,"className":755,"height":747,"src":756,"width":747},"Plotly.js畫出的進階P-Chart",[746],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",[16,758,759],{},"以上的圖表可以套用到其它統計管制圖，例如：",[16,761,762],{},"C-Chart,\nNP-Chart,\nU-Chart\nXBar-R-Chart\nXBar-S-Chart\nXMed-R-Chart\nX-MR-Chart,\nMA-Chart\nI-MR-Chart",[16,764,765,766,770],{},"歡迎與我們聯絡資訊如下，讓我們為您們Demo說明解決方案",[61,767,769],{"href":768},"\u002Fsolutions\u002Fspc","SPC統計製程控制系統"," 。",[16,772,773],{},[61,774,776],{"href":775},"\u002FcontactUs","聯絡我們",[778,779,780],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}",{"title":32,"searchDepth":94,"depth":94,"links":782},[],"2026-10-05","先用vite快速建立Vue3新專案，預設程式語言為Javascript，然後一步一步安裝Plotly.js並引用實作統計管制圖表，以P-chart不良率管制圖為例(簡稱：P 管制圖)","md",{"src":787},"images\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",{},"\u002Fblog\u002Fzh-tw\u002Fplotlyjs",{"title":5,"description":784},"blog\u002Fzh-TW\u002FplotlyJs","sLFIQMIbD5RS6epckJZHK4q2Sd4gu8sODvsPeywc1CY",[794],{"title":795,"path":796,"stem":797,"description":798,"children":-1},"Vue3 Vite搭配MQTT實現模擬監控IOT設備聯網","\u002Fblog\u002Fiot","blog\u002Fzh-TW\u002Fiot","首先需要先安裝mosquitto作為broker，工具使用MQTTX模擬MQTT的運作，再用vite快速建立Vue3新專案，然後引用mqtt.js來與MQTT建立連線並顯示從設備機台傳送來的數據。",1791796702761]