[{"data":1,"prerenderedAt":790},["ShallowReactive",2],{"\u002Fblog\u002Fen\u002Fplotlyjs":3,"\u002Fblog\u002Fen\u002Fplotlyjs-surround":784},{"id":4,"title":5,"authors":6,"badge":11,"body":12,"date":774,"description":775,"extension":776,"image":777,"meta":779,"navigation":178,"path":780,"seo":781,"stem":782,"__hash__":783},"posts\u002Fblog\u002Fen\u002FplotlyJs.md","Implementing Statistical Charts with Plotly.js in Vue 3, Vite, and JavaScript- A P-Chart (Fraction Defective Control Chart) Example",[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":772},"minimark",[15,19,22,33,36,42,45,48,57,60,125,729,740,748,751,754,762,768],[16,17,18],"p",{},"Due to the requirements of product and project development, we needed to use the Plotly.js library to implement statistical process control charts. In this article, we will use a simple P-Chart (Fraction Defective Control Chart) as an example to demonstrate the implementation.",[16,20,21],{},"First, open Command Prompt and enter the command to create a new Vue 3 project. When prompted, select JavaScript as the programming language.",[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],{},"Open the Visual Studio Code terminal and run the following command to install 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],{},"In SPC (Statistical Process Control), a P-Chart (Fraction Defective Control Chart), commonly referred to as a P Chart, consists of the following four lines:",[16,46,47],{},"Center Line (CL)\nUpper Control Limit (UCL)\nLower Control Limit (LCL)\nDefect Rate",[16,49,50,51],{},"Formula Reference: ",[52,53,54],"a",{"href":54,"rel":55},"https:\u002F\u002Fwww.itl.nist.gov\u002Fdiv898\u002Fhandbook\u002Fpmc\u002Fsection3\u002Fpmc332.htm?utm_source=chatgpt.com",[56],"nofollow",[16,58,59],{},"Example code for drawing the chart：",[23,61,65],{"className":62,"code":63,"language":64,"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,66,67,83,115],{"__ignoreMap":32},[68,69,72,76,80],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sMK4o","\u003C",[68,77,79],{"class":78},"swJcz","template",[68,81,82],{"class":74},">\n",[68,84,86,89,92,96,99,102,106,108,111,113],{"class":70,"line":85},2,[68,87,88],{"class":74},"  \u003C",[68,90,91],{"class":78},"div",[68,93,95],{"class":94},"spNyl"," ref",[68,97,98],{"class":74},"=",[68,100,101],{"class":74},"\"",[68,103,105],{"class":104},"sfazB","chart",[68,107,101],{"class":74},[68,109,110],{"class":74},">\u003C\u002F",[68,112,91],{"class":78},[68,114,82],{"class":74},[68,116,118,121,123],{"class":70,"line":117},3,[68,119,120],{"class":74},"\u003C\u002F",[68,122,79],{"class":78},[68,124,82],{"class":74},[23,126,130],{"className":127,"code":128,"language":129,"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,131,132,144,150,173,180,186,191,200,236,266,282,297,305,310,318,345,373,386,400,407,412,420,447,476,489,503,510,515,523,550,577,591,605,612,617,623,628,636,661,668,673,681,712,720],{"__ignoreMap":32},[68,133,134,136,139,142],{"class":70,"line":71},[68,135,75],{"class":74},[68,137,138],{"class":78},"script",[68,140,141],{"class":94}," setup",[68,143,82],{"class":74},[68,145,146],{"class":70,"line":85},[68,147,149],{"class":148},"sTEyZ","import Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\n",[68,151,152,155,158,161,164,167,170],{"class":70,"line":117},[68,153,154],{"class":148},"import ",[68,156,157],{"class":74},"{",[68,159,160],{"class":148}," onMounted",[68,162,163],{"class":74},",",[68,165,166],{"class":148}," ref ",[68,168,169],{"class":74},"}",[68,171,172],{"class":148}," from 'vue';\n",[68,174,176],{"class":70,"line":175},4,[68,177,179],{"emptyLinePlaceholder":178},true,"\n",[68,181,183],{"class":70,"line":182},5,[68,184,185],{"class":148},"const chart = ref(null);\n",[68,187,189],{"class":70,"line":188},6,[68,190,179],{"emptyLinePlaceholder":178},[68,192,194,197],{"class":70,"line":193},7,[68,195,196],{"class":148},"var ucl = ",[68,198,199],{"class":74},"{\n",[68,201,203,206,210,212,215,217,220,222,225,227,230,233],{"class":70,"line":202},8,[68,204,205],{"class":148},"  x: [",[68,207,209],{"class":208},"sbssI","1",[68,211,163],{"class":74},[68,213,214],{"class":208}," 2",[68,216,163],{"class":74},[68,218,219],{"class":208}," 3",[68,221,163],{"class":74},[68,223,224],{"class":208}," 4",[68,226,163],{"class":74},[68,228,229],{"class":208}," 5",[68,231,232],{"class":148},"]",[68,234,235],{"class":74},",\n",[68,237,239,242,245,247,250,252,254,256,258,260,262,264],{"class":70,"line":238},9,[68,240,241],{"class":148},"  y: [",[68,243,244],{"class":208},"9.88",[68,246,163],{"class":74},[68,248,249],{"class":208}," 9.88",[68,251,163],{"class":74},[68,253,249],{"class":208},[68,255,163],{"class":74},[68,257,249],{"class":208},[68,259,163],{"class":74},[68,261,249],{"class":208},[68,263,232],{"class":148},[68,265,235],{"class":74},[68,267,269,272,275,278,280],{"class":70,"line":268},10,[68,270,271],{"class":148},"  mode: ",[68,273,274],{"class":74},"'",[68,276,277],{"class":104},"lines",[68,279,274],{"class":74},[68,281,235],{"class":74},[68,283,285,288,290,293,295],{"class":70,"line":284},11,[68,286,287],{"class":148},"  name: ",[68,289,274],{"class":74},[68,291,292],{"class":104},"UCL管制上限",[68,294,274],{"class":74},[68,296,235],{"class":74},[68,298,300,302],{"class":70,"line":299},12,[68,301,169],{"class":74},[68,303,304],{"class":148},";\n",[68,306,308],{"class":70,"line":307},13,[68,309,179],{"emptyLinePlaceholder":178},[68,311,313,316],{"class":70,"line":312},14,[68,314,315],{"class":148},"var cl = ",[68,317,199],{"class":74},[68,319,321,323,325,327,329,331,333,335,337,339,341,343],{"class":70,"line":320},15,[68,322,205],{"class":148},[68,324,209],{"class":208},[68,326,163],{"class":74},[68,328,214],{"class":208},[68,330,163],{"class":74},[68,332,219],{"class":208},[68,334,163],{"class":74},[68,336,224],{"class":208},[68,338,163],{"class":74},[68,340,229],{"class":208},[68,342,232],{"class":148},[68,344,235],{"class":74},[68,346,348,350,353,355,357,359,361,363,365,367,369,371],{"class":70,"line":347},16,[68,349,241],{"class":148},[68,351,352],{"class":208},"3",[68,354,163],{"class":74},[68,356,219],{"class":208},[68,358,163],{"class":74},[68,360,219],{"class":208},[68,362,163],{"class":74},[68,364,219],{"class":208},[68,366,163],{"class":74},[68,368,219],{"class":208},[68,370,232],{"class":148},[68,372,235],{"class":74},[68,374,376,378,380,382,384],{"class":70,"line":375},17,[68,377,271],{"class":148},[68,379,274],{"class":74},[68,381,277],{"class":104},[68,383,274],{"class":74},[68,385,235],{"class":74},[68,387,389,391,393,396,398],{"class":70,"line":388},18,[68,390,287],{"class":148},[68,392,274],{"class":74},[68,394,395],{"class":104},"CL中心線",[68,397,274],{"class":74},[68,399,235],{"class":74},[68,401,403,405],{"class":70,"line":402},19,[68,404,169],{"class":74},[68,406,304],{"class":148},[68,408,410],{"class":70,"line":409},20,[68,411,179],{"emptyLinePlaceholder":178},[68,413,415,418],{"class":70,"line":414},21,[68,416,417],{"class":148},"var lcl = ",[68,419,199],{"class":74},[68,421,423,425,427,429,431,433,435,437,439,441,443,445],{"class":70,"line":422},22,[68,424,205],{"class":148},[68,426,209],{"class":208},[68,428,163],{"class":74},[68,430,214],{"class":208},[68,432,163],{"class":74},[68,434,219],{"class":208},[68,436,163],{"class":74},[68,438,224],{"class":208},[68,440,163],{"class":74},[68,442,229],{"class":208},[68,444,232],{"class":148},[68,446,235],{"class":74},[68,448,450,452,455,457,460,462,464,466,468,470,472,474],{"class":70,"line":449},23,[68,451,241],{"class":148},[68,453,454],{"class":208},"0",[68,456,163],{"class":74},[68,458,459],{"class":208}," 0",[68,461,163],{"class":74},[68,463,459],{"class":208},[68,465,163],{"class":74},[68,467,459],{"class":208},[68,469,163],{"class":74},[68,471,459],{"class":208},[68,473,232],{"class":148},[68,475,235],{"class":74},[68,477,479,481,483,485,487],{"class":70,"line":478},24,[68,480,271],{"class":148},[68,482,274],{"class":74},[68,484,277],{"class":104},[68,486,274],{"class":74},[68,488,235],{"class":74},[68,490,492,494,496,499,501],{"class":70,"line":491},25,[68,493,287],{"class":148},[68,495,274],{"class":74},[68,497,498],{"class":104},"LCL管制下限",[68,500,274],{"class":74},[68,502,235],{"class":74},[68,504,506,508],{"class":70,"line":505},26,[68,507,169],{"class":74},[68,509,304],{"class":148},[68,511,513],{"class":70,"line":512},27,[68,514,179],{"emptyLinePlaceholder":178},[68,516,518,521],{"class":70,"line":517},28,[68,519,520],{"class":148},"var values = ",[68,522,199],{"class":74},[68,524,526,528,530,532,534,536,538,540,542,544,546,548],{"class":70,"line":525},29,[68,527,205],{"class":148},[68,529,209],{"class":208},[68,531,163],{"class":74},[68,533,214],{"class":208},[68,535,163],{"class":74},[68,537,219],{"class":208},[68,539,163],{"class":74},[68,541,224],{"class":208},[68,543,163],{"class":74},[68,545,229],{"class":208},[68,547,232],{"class":148},[68,549,235],{"class":74},[68,551,553,555,557,559,561,563,565,567,569,571,573,575],{"class":70,"line":552},30,[68,554,241],{"class":148},[68,556,352],{"class":208},[68,558,163],{"class":74},[68,560,214],{"class":208},[68,562,163],{"class":74},[68,564,224],{"class":208},[68,566,163],{"class":74},[68,568,214],{"class":208},[68,570,163],{"class":74},[68,572,219],{"class":208},[68,574,232],{"class":148},[68,576,235],{"class":74},[68,578,580,582,584,587,589],{"class":70,"line":579},31,[68,581,271],{"class":148},[68,583,274],{"class":74},[68,585,586],{"class":104},"lines+markers",[68,588,274],{"class":74},[68,590,235],{"class":74},[68,592,594,596,598,601,603],{"class":70,"line":593},32,[68,595,287],{"class":148},[68,597,274],{"class":74},[68,599,600],{"class":104},"不良率(%)",[68,602,274],{"class":74},[68,604,235],{"class":74},[68,606,608,610],{"class":70,"line":607},33,[68,609,169],{"class":74},[68,611,304],{"class":148},[68,613,615],{"class":70,"line":614},34,[68,616,179],{"emptyLinePlaceholder":178},[68,618,620],{"class":70,"line":619},35,[68,621,622],{"class":148},"var data = [ucl, cl, lcl, values];\n",[68,624,626],{"class":70,"line":625},36,[68,627,179],{"emptyLinePlaceholder":178},[68,629,631,634],{"class":70,"line":630},37,[68,632,633],{"class":148},"var layout = ",[68,635,199],{"class":74},[68,637,639,642,644,647,650,653,656,658],{"class":70,"line":638},38,[68,640,641],{"class":148},"  title: ",[68,643,157],{"class":74},[68,645,646],{"class":78}," text",[68,648,649],{"class":74},":",[68,651,652],{"class":74}," '",[68,654,655],{"class":104},"P-Chart",[68,657,274],{"class":74},[68,659,660],{"class":74}," },\n",[68,662,664,666],{"class":70,"line":663},39,[68,665,169],{"class":74},[68,667,304],{"class":148},[68,669,671],{"class":70,"line":670},40,[68,672,179],{"emptyLinePlaceholder":178},[68,674,676,679],{"class":70,"line":675},41,[68,677,678],{"class":148},"onMounted(() => ",[68,680,199],{"class":74},[68,682,684,687,690,694,697,699,702,704,707,709],{"class":70,"line":683},42,[68,685,686],{"class":148},"  Plotly",[68,688,689],{"class":74},".",[68,691,693],{"class":692},"s2Zo4","newPlot",[68,695,696],{"class":148},"(chart",[68,698,689],{"class":74},[68,700,701],{"class":148},"value",[68,703,163],{"class":74},[68,705,706],{"class":148}," data",[68,708,163],{"class":74},[68,710,711],{"class":148}," layout);\n",[68,713,715,717],{"class":70,"line":714},43,[68,716,169],{"class":74},[68,718,719],{"class":148},");\n",[68,721,723,725,727],{"class":70,"line":722},44,[68,724,120],{"class":74},[68,726,138],{"class":78},[68,728,82],{"class":74},[16,730,731,732],{},"The result is shown in the figure below：\n",[733,734],"img",{"alt":735,"className":736,"height":738,"src":739,"width":738},"Plotly.js畫出的基本P-Chart",[737],"rounded-lg",800,"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FbasicPChart.png",[16,741,742,743],{},"A more advanced example is shown below. When the defect rate exceeds the Upper Control Limit (UCL), red markers and warning lines are displayed to highlight the out-of-control condition.：\n",[733,744],{"alt":745,"className":746,"height":738,"src":747,"width":738},"Plotly.js畫出的進階P-Chart",[737],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",[16,749,750],{},"The same charting techniques can be extended to other statistical process control charts, including:",[16,752,753],{},"C-Chart,\nNP-Chart,\nU-Chart\nXBar-R-Chart\nXBar-S-Chart\nXMed-R-Chart\nX-MR-Chart,\nMA-Chart\nI-MR-Chart",[16,755,756,757,761],{},"If you would like to learn more about our solutions, please contact us using the information below. Our team will be pleased to provide a live demonstration and discuss how our solutions can meet your needs.",[52,758,760],{"href":759},"\u002Fsolutions\u002Fspc","SPC"," 。",[16,763,764],{},[52,765,767],{"href":766},"\u002FcontactUs","Contact Us",[769,770,771],"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":85,"depth":85,"links":773},[],"2026-10-05","First, use Vite to quickly create a new Vue 3 project with JavaScript as the default programming language. Then, install and integrate Plotly.js step by step to implement statistical process control charts. In this example, we will use a P-Chart (Fraction Defective Control Chart), commonly referred to as a P Chart, to demonstrate the implementation.","md",{"src":778},"images\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",{},"\u002Fblog\u002Fen\u002Fplotlyjs",{"title":5,"description":775},"blog\u002Fen\u002FplotlyJs","c6csrXTTZ9-gd8qAKX2cJpNitfLeuDcWGQxEl3H7THU",[785],{"title":786,"path":787,"stem":788,"description":789,"children":-1},"Simulating IoT Device Connectivity Monitoring Using Vue 3, Vite, and MQTT","\u002Fblog\u002Fiot","blog\u002Fen\u002Fiot","First, install Mosquitto as the MQTT broker. Then, use MQTTX to simulate MQTT operations and quickly create a new Vue 3 project with Vite. After that, integrate mqtt.js to establish a connection with the MQTT broker and display the data transmitted from IoT devices in real time.",1791796703849]