[{"data":1,"prerenderedAt":1309},["ShallowReactive",2],{"posts-en":3},[4,597],{"id":5,"title":6,"authors":7,"badge":12,"body":13,"date":587,"description":588,"extension":589,"image":590,"meta":592,"navigation":264,"path":593,"seo":594,"stem":595,"__hash__":596},"posts\u002Fblog\u002Fen\u002Fiot.md","Simulating IoT Device Connectivity Monitoring Using Vue 3, Vite, and MQTT",[8],{"name":9,"avatar":10},"Neil Tsai",{"src":11},"https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F12755093?v=4&size=64",null,{"type":14,"value":15,"toc":582},"minimark",[16,20,31,34,45,48,52,59,70,79,83,86,92,95,98,104,112,115,170,540,548,556,564,572,578],[17,18,19],"h2",{"id":19},"mosquitto",[21,22,23,24,30],"p",{},"First, download and install Mosquitto from the official website: ",[25,26,19],"a",{"href":27,"rel":28},"https:\u002F\u002Fmosquitto.org\u002Fdownload\u002F",[29],"nofollow",".",[21,32,33],{},"Once the installation is complete, open PowerShell or Command Prompt (CMD) and run the following command to verify that Mosquitto was installed successfully:",[35,36,41],"pre",{"className":37,"code":39,"language":40},[38],"language-text","cd \"C:\\Program Files\\mosquitto\"\n\n.\\mosquitto.exe -h\n","text",[42,43,39],"code",{"__ignoreMap":44},"",[21,46,47],{},"If the version number and command-line parameters are displayed, it indicates that the installation was successful.",[17,49,51],{"id":50},"mqttx","MQTTX",[21,53,54,55,30],{},"Next, download and install MQTTX from the official website: ",[25,56,51],{"href":57,"rel":58},"https:\u002F\u002Fmqttx.app\u002F",[29],[21,60,61,62],{},"Once MQTTX is installed, launch the application. Under the Connections section, click the \"+\" icon and choose \"New Connection\" to create a new MQTT connection.\n",[63,64],"img",{"alt":65,"className":66,"height":68,"src":69,"width":68},"MQTTX建立新連線",[67],"rounded-lg",350,"\u002Fimages\u002Fblogs\u002Fiot\u002Fmqttx.png",[21,71,72,73],{},"Enter the following settings. You do not need to specify a Client ID, then click \"Connect\".：\n",[63,74],{"alt":75,"className":76,"height":77,"src":78,"width":77},"MQTTX 輸入內容",[67],800,"\u002Fimages\u002Fblogs\u002Fiot\u002FmqttxInput.png",[17,80,82],{"id":81},"vue3-vite","Vue3 Vite",[21,84,85],{},"Since browsers require WebSocket support, for example：",[35,87,90],{"className":88,"code":89,"language":40},[38],"ws:\u002F\u002Flocalhost:9001\n",[42,91,89],{"__ignoreMap":44},[21,93,94],{},"Therefore, you need to go back to the Mosquitto installation directory and locate the mosquitto.conf file.",[21,96,97],{},"Add a WebSocket listener to the configuration as shown below:",[35,99,102],{"className":100,"code":101,"language":40},[38],"listener 1883\nprotocol mqtt\n\nlistener 9001\nprotocol websockets\n\nallow_anonymous true\n",[42,103,101],{"__ignoreMap":44},[21,105,106,107],{},"Next, open Task Manager and restart the Mosquitto service.\n",[63,108],{"alt":109,"className":110,"height":77,"src":111,"width":77},"mosquitto服務",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FmosquittoService.png",[21,113,114],{},"Create the Vue 3 + TypeScript code as shown below::",[35,116,120],{"className":117,"code":118,"language":119,"meta":44,"style":44},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003Ch3>接收到的訊息：{{ receiveMessage }}\u003C\u002Fh3>\n\u003C\u002Ftemplate>\n","html",[42,121,122,138,161],{"__ignoreMap":44},[123,124,127,131,135],"span",{"class":125,"line":126},"line",1,[123,128,130],{"class":129},"sMK4o","\u003C",[123,132,134],{"class":133},"swJcz","template",[123,136,137],{"class":129},">\n",[123,139,141,144,147,150,154,157,159],{"class":125,"line":140},2,[123,142,143],{"class":129},"  \u003C",[123,145,146],{"class":133},"h3",[123,148,149],{"class":129},">",[123,151,153],{"class":152},"sTEyZ","接收到的訊息：{{ receiveMessage }}",[123,155,156],{"class":129},"\u003C\u002F",[123,158,146],{"class":133},[123,160,137],{"class":129},[123,162,164,166,168],{"class":125,"line":163},3,[123,165,156],{"class":129},[123,167,134],{"class":133},[123,169,137],{"class":129},[35,171,175],{"className":172,"code":173,"language":174,"meta":44,"style":44},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue';\nimport mqtt, { type MqttClient } from 'mqtt';\n\nconst receiveMessage = ref();\n\nconst client: MqttClient = mqtt.connect('ws:\u002F\u002Flocalhost:9001');\n\nclient.on('connect', () => {\n  console.log('MQTT connected');\n\n  client.subscribe('factory\u002Fmachine01\u002Fdata');\n});\n\nclient.on('message', (topic, message) => {\n  receiveMessage.value = message.toString();\n  console.log(topic, message.toString());\n});\n\u003C\u002Fscript>\n","typescript",[42,176,177,198,228,259,266,286,291,330,335,365,389,394,418,428,433,471,495,521,530],{"__ignoreMap":44},[123,178,179,181,184,187,190,194,196],{"class":125,"line":126},[123,180,130],{"class":129},[123,182,183],{"class":152},"script setup lang",[123,185,186],{"class":129},"=",[123,188,189],{"class":129},"\"",[123,191,193],{"class":192},"sfazB","ts",[123,195,189],{"class":129},[123,197,137],{"class":129},[123,199,200,204,207,210,213,216,219,222,225],{"class":125,"line":140},[123,201,203],{"class":202},"s7zQu","import",[123,205,206],{"class":129}," {",[123,208,209],{"class":152}," ref",[123,211,212],{"class":129}," }",[123,214,215],{"class":202}," from",[123,217,218],{"class":129}," '",[123,220,221],{"class":192},"vue",[123,223,224],{"class":129},"'",[123,226,227],{"class":129},";\n",[123,229,230,232,235,238,240,243,246,248,250,252,255,257],{"class":125,"line":163},[123,231,203],{"class":202},[123,233,234],{"class":152}," mqtt",[123,236,237],{"class":129},",",[123,239,206],{"class":129},[123,241,242],{"class":202}," type",[123,244,245],{"class":152}," MqttClient",[123,247,212],{"class":129},[123,249,215],{"class":202},[123,251,218],{"class":129},[123,253,254],{"class":192},"mqtt",[123,256,224],{"class":129},[123,258,227],{"class":129},[123,260,262],{"class":125,"line":261},4,[123,263,265],{"emptyLinePlaceholder":264},true,"\n",[123,267,269,273,276,278,281,284],{"class":125,"line":268},5,[123,270,272],{"class":271},"spNyl","const",[123,274,275],{"class":152}," receiveMessage ",[123,277,186],{"class":129},[123,279,209],{"class":280},"s2Zo4",[123,282,283],{"class":152},"()",[123,285,227],{"class":129},[123,287,289],{"class":125,"line":288},6,[123,290,265],{"emptyLinePlaceholder":264},[123,292,294,296,299,302,305,308,310,312,315,318,320,323,325,328],{"class":125,"line":293},7,[123,295,272],{"class":271},[123,297,298],{"class":152}," client",[123,300,301],{"class":129},":",[123,303,245],{"class":304},"sBMFI",[123,306,307],{"class":129}," =",[123,309,234],{"class":152},[123,311,30],{"class":129},[123,313,314],{"class":280},"connect",[123,316,317],{"class":152},"(",[123,319,224],{"class":129},[123,321,322],{"class":192},"ws:\u002F\u002Flocalhost:9001",[123,324,224],{"class":129},[123,326,327],{"class":152},")",[123,329,227],{"class":129},[123,331,333],{"class":125,"line":332},8,[123,334,265],{"emptyLinePlaceholder":264},[123,336,338,341,343,346,348,350,352,354,356,359,362],{"class":125,"line":337},9,[123,339,340],{"class":152},"client",[123,342,30],{"class":129},[123,344,345],{"class":280},"on",[123,347,317],{"class":152},[123,349,224],{"class":129},[123,351,314],{"class":192},[123,353,224],{"class":129},[123,355,237],{"class":129},[123,357,358],{"class":129}," ()",[123,360,361],{"class":271}," =>",[123,363,364],{"class":129}," {\n",[123,366,368,371,373,376,378,380,383,385,387],{"class":125,"line":367},10,[123,369,370],{"class":152},"  console",[123,372,30],{"class":129},[123,374,375],{"class":280},"log",[123,377,317],{"class":133},[123,379,224],{"class":129},[123,381,382],{"class":192},"MQTT connected",[123,384,224],{"class":129},[123,386,327],{"class":133},[123,388,227],{"class":129},[123,390,392],{"class":125,"line":391},11,[123,393,265],{"emptyLinePlaceholder":264},[123,395,397,400,402,405,407,409,412,414,416],{"class":125,"line":396},12,[123,398,399],{"class":152},"  client",[123,401,30],{"class":129},[123,403,404],{"class":280},"subscribe",[123,406,317],{"class":133},[123,408,224],{"class":129},[123,410,411],{"class":192},"factory\u002Fmachine01\u002Fdata",[123,413,224],{"class":129},[123,415,327],{"class":133},[123,417,227],{"class":129},[123,419,421,424,426],{"class":125,"line":420},13,[123,422,423],{"class":129},"}",[123,425,327],{"class":152},[123,427,227],{"class":129},[123,429,431],{"class":125,"line":430},14,[123,432,265],{"emptyLinePlaceholder":264},[123,434,436,438,440,442,444,446,449,451,453,456,460,462,465,467,469],{"class":125,"line":435},15,[123,437,340],{"class":152},[123,439,30],{"class":129},[123,441,345],{"class":280},[123,443,317],{"class":152},[123,445,224],{"class":129},[123,447,448],{"class":192},"message",[123,450,224],{"class":129},[123,452,237],{"class":129},[123,454,455],{"class":129}," (",[123,457,459],{"class":458},"sHdIc","topic",[123,461,237],{"class":129},[123,463,464],{"class":458}," message",[123,466,327],{"class":129},[123,468,361],{"class":271},[123,470,364],{"class":129},[123,472,474,477,479,482,484,486,488,491,493],{"class":125,"line":473},16,[123,475,476],{"class":152},"  receiveMessage",[123,478,30],{"class":129},[123,480,481],{"class":152},"value",[123,483,307],{"class":129},[123,485,464],{"class":152},[123,487,30],{"class":129},[123,489,490],{"class":280},"toString",[123,492,283],{"class":133},[123,494,227],{"class":129},[123,496,498,500,502,504,506,508,510,512,514,516,519],{"class":125,"line":497},17,[123,499,370],{"class":152},[123,501,30],{"class":129},[123,503,375],{"class":280},[123,505,317],{"class":133},[123,507,459],{"class":152},[123,509,237],{"class":129},[123,511,464],{"class":152},[123,513,30],{"class":129},[123,515,490],{"class":280},[123,517,518],{"class":133},"())",[123,520,227],{"class":129},[123,522,524,526,528],{"class":125,"line":523},18,[123,525,423],{"class":129},[123,527,327],{"class":152},[123,529,227],{"class":129},[123,531,533,535,538],{"class":125,"line":532},19,[123,534,156],{"class":129},[123,536,537],{"class":152},"script",[123,539,137],{"class":129},[21,541,542,543],{},"In MQTTX, switch to the \"Publish\" tab and enter the settings as shown in the figure below：\n",[63,544],{"alt":545,"className":546,"height":77,"src":547,"width":77},"在MQTTX選Published並輸入",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002Fpublished.png",[21,549,550,551],{},"The web page will receive the message as shown in the figure below：\n",[63,552],{"alt":553,"className":554,"height":77,"src":555,"width":77},"web收到訊息",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FreceiveMessage.png",[21,557,558,559],{},"This setup can be used to simulate the monitoring of connected IoT devices. An example of a more advanced IoT device dashboard is shown below：\n",[63,560],{"alt":561,"className":562,"height":77,"src":563,"width":77},"iot 機台儀表板",[67],"\u002Fimages\u002Fblogs\u002Fiot\u002FiotMachineDashboard.gif",[21,565,566,567,571],{},"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.",[25,568,570],{"href":569},"\u002Fsolutions\u002Faiot","AIoT"," 。",[21,573,574],{},[25,575,577],{"href":576},"\u002FcontactUs","Contact Us",[579,580,581],"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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}",{"title":44,"searchDepth":140,"depth":140,"links":583},[584,585,586],{"id":19,"depth":140,"text":19},{"id":50,"depth":140,"text":51},{"id":81,"depth":140,"text":82},"2026-10-08","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.","md",{"src":591},"images\u002Fblogs\u002Fiot\u002FiotDashboard.png",{},"\u002Fblog\u002Fen\u002Fiot",{"title":6,"description":588},"blog\u002Fen\u002Fiot","bWVnxG4m3mFofDA7ousUgYG5NndYUSAogZQ4MQ78WNk",{"id":598,"title":599,"authors":600,"badge":12,"body":603,"date":1300,"description":1301,"extension":589,"image":1302,"meta":1304,"navigation":264,"path":1305,"seo":1306,"stem":1307,"__hash__":1308},"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",[601],{"name":9,"avatar":602},{"src":11},{"type":14,"value":604,"toc":1298},[605,608,611,617,620,626,629,632,639,642,688,1263,1271,1279,1282,1285,1291,1295],[21,606,607],{},"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.",[21,609,610],{},"First, open Command Prompt and enter the command to create a new Vue 3 project. When prompted, select JavaScript as the programming language.",[35,612,615],{"className":613,"code":614,"language":40},[38],"npm create vite@latest\n",[42,616,614],{"__ignoreMap":44},[21,618,619],{},"Open the Visual Studio Code terminal and run the following command to install Plotly.js:",[35,621,624],{"className":622,"code":623,"language":40},[38],"npm i plotly.js\n",[42,625,623],{"__ignoreMap":44},[21,627,628],{},"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:",[21,630,631],{},"Center Line (CL)\nUpper Control Limit (UCL)\nLower Control Limit (LCL)\nDefect Rate",[21,633,634,635],{},"Formula Reference: ",[25,636,637],{"href":637,"rel":638},"https:\u002F\u002Fwww.itl.nist.gov\u002Fdiv898\u002Fhandbook\u002Fpmc\u002Fsection3\u002Fpmc332.htm?utm_source=chatgpt.com",[29],[21,640,641],{},"Example code for drawing the chart：",[35,643,645],{"className":117,"code":644,"language":119,"meta":44,"style":44},"\u003Ctemplate>\n  \u003Cdiv ref=\"chart\">\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[42,646,647,655,680],{"__ignoreMap":44},[123,648,649,651,653],{"class":125,"line":126},[123,650,130],{"class":129},[123,652,134],{"class":133},[123,654,137],{"class":129},[123,656,657,659,662,664,666,668,671,673,676,678],{"class":125,"line":140},[123,658,143],{"class":129},[123,660,661],{"class":133},"div",[123,663,209],{"class":271},[123,665,186],{"class":129},[123,667,189],{"class":129},[123,669,670],{"class":192},"chart",[123,672,189],{"class":129},[123,674,675],{"class":129},">\u003C\u002F",[123,677,661],{"class":133},[123,679,137],{"class":129},[123,681,682,684,686],{"class":125,"line":163},[123,683,156],{"class":129},[123,685,134],{"class":133},[123,687,137],{"class":129},[35,689,693],{"className":690,"code":691,"language":692,"meta":44,"style":44},"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",[42,694,695,706,711,732,736,741,745,753,788,817,831,845,851,855,862,888,915,927,940,946,951,959,986,1015,1028,1042,1049,1054,1062,1089,1116,1130,1144,1151,1156,1162,1167,1175,1198,1205,1210,1218,1246,1254],{"__ignoreMap":44},[123,696,697,699,701,704],{"class":125,"line":126},[123,698,130],{"class":129},[123,700,537],{"class":133},[123,702,703],{"class":271}," setup",[123,705,137],{"class":129},[123,707,708],{"class":125,"line":140},[123,709,710],{"class":152},"import Plotly from 'plotly.js\u002Fdist\u002Fplotly.js';\n",[123,712,713,716,719,722,724,727,729],{"class":125,"line":163},[123,714,715],{"class":152},"import ",[123,717,718],{"class":129},"{",[123,720,721],{"class":152}," onMounted",[123,723,237],{"class":129},[123,725,726],{"class":152}," ref ",[123,728,423],{"class":129},[123,730,731],{"class":152}," from 'vue';\n",[123,733,734],{"class":125,"line":261},[123,735,265],{"emptyLinePlaceholder":264},[123,737,738],{"class":125,"line":268},[123,739,740],{"class":152},"const chart = ref(null);\n",[123,742,743],{"class":125,"line":288},[123,744,265],{"emptyLinePlaceholder":264},[123,746,747,750],{"class":125,"line":293},[123,748,749],{"class":152},"var ucl = ",[123,751,752],{"class":129},"{\n",[123,754,755,758,762,764,767,769,772,774,777,779,782,785],{"class":125,"line":332},[123,756,757],{"class":152},"  x: [",[123,759,761],{"class":760},"sbssI","1",[123,763,237],{"class":129},[123,765,766],{"class":760}," 2",[123,768,237],{"class":129},[123,770,771],{"class":760}," 3",[123,773,237],{"class":129},[123,775,776],{"class":760}," 4",[123,778,237],{"class":129},[123,780,781],{"class":760}," 5",[123,783,784],{"class":152},"]",[123,786,787],{"class":129},",\n",[123,789,790,793,796,798,801,803,805,807,809,811,813,815],{"class":125,"line":337},[123,791,792],{"class":152},"  y: [",[123,794,795],{"class":760},"9.88",[123,797,237],{"class":129},[123,799,800],{"class":760}," 9.88",[123,802,237],{"class":129},[123,804,800],{"class":760},[123,806,237],{"class":129},[123,808,800],{"class":760},[123,810,237],{"class":129},[123,812,800],{"class":760},[123,814,784],{"class":152},[123,816,787],{"class":129},[123,818,819,822,824,827,829],{"class":125,"line":367},[123,820,821],{"class":152},"  mode: ",[123,823,224],{"class":129},[123,825,826],{"class":192},"lines",[123,828,224],{"class":129},[123,830,787],{"class":129},[123,832,833,836,838,841,843],{"class":125,"line":391},[123,834,835],{"class":152},"  name: ",[123,837,224],{"class":129},[123,839,840],{"class":192},"UCL管制上限",[123,842,224],{"class":129},[123,844,787],{"class":129},[123,846,847,849],{"class":125,"line":396},[123,848,423],{"class":129},[123,850,227],{"class":152},[123,852,853],{"class":125,"line":420},[123,854,265],{"emptyLinePlaceholder":264},[123,856,857,860],{"class":125,"line":430},[123,858,859],{"class":152},"var cl = ",[123,861,752],{"class":129},[123,863,864,866,868,870,872,874,876,878,880,882,884,886],{"class":125,"line":435},[123,865,757],{"class":152},[123,867,761],{"class":760},[123,869,237],{"class":129},[123,871,766],{"class":760},[123,873,237],{"class":129},[123,875,771],{"class":760},[123,877,237],{"class":129},[123,879,776],{"class":760},[123,881,237],{"class":129},[123,883,781],{"class":760},[123,885,784],{"class":152},[123,887,787],{"class":129},[123,889,890,892,895,897,899,901,903,905,907,909,911,913],{"class":125,"line":473},[123,891,792],{"class":152},[123,893,894],{"class":760},"3",[123,896,237],{"class":129},[123,898,771],{"class":760},[123,900,237],{"class":129},[123,902,771],{"class":760},[123,904,237],{"class":129},[123,906,771],{"class":760},[123,908,237],{"class":129},[123,910,771],{"class":760},[123,912,784],{"class":152},[123,914,787],{"class":129},[123,916,917,919,921,923,925],{"class":125,"line":497},[123,918,821],{"class":152},[123,920,224],{"class":129},[123,922,826],{"class":192},[123,924,224],{"class":129},[123,926,787],{"class":129},[123,928,929,931,933,936,938],{"class":125,"line":523},[123,930,835],{"class":152},[123,932,224],{"class":129},[123,934,935],{"class":192},"CL中心線",[123,937,224],{"class":129},[123,939,787],{"class":129},[123,941,942,944],{"class":125,"line":532},[123,943,423],{"class":129},[123,945,227],{"class":152},[123,947,949],{"class":125,"line":948},20,[123,950,265],{"emptyLinePlaceholder":264},[123,952,954,957],{"class":125,"line":953},21,[123,955,956],{"class":152},"var lcl = ",[123,958,752],{"class":129},[123,960,962,964,966,968,970,972,974,976,978,980,982,984],{"class":125,"line":961},22,[123,963,757],{"class":152},[123,965,761],{"class":760},[123,967,237],{"class":129},[123,969,766],{"class":760},[123,971,237],{"class":129},[123,973,771],{"class":760},[123,975,237],{"class":129},[123,977,776],{"class":760},[123,979,237],{"class":129},[123,981,781],{"class":760},[123,983,784],{"class":152},[123,985,787],{"class":129},[123,987,989,991,994,996,999,1001,1003,1005,1007,1009,1011,1013],{"class":125,"line":988},23,[123,990,792],{"class":152},[123,992,993],{"class":760},"0",[123,995,237],{"class":129},[123,997,998],{"class":760}," 0",[123,1000,237],{"class":129},[123,1002,998],{"class":760},[123,1004,237],{"class":129},[123,1006,998],{"class":760},[123,1008,237],{"class":129},[123,1010,998],{"class":760},[123,1012,784],{"class":152},[123,1014,787],{"class":129},[123,1016,1018,1020,1022,1024,1026],{"class":125,"line":1017},24,[123,1019,821],{"class":152},[123,1021,224],{"class":129},[123,1023,826],{"class":192},[123,1025,224],{"class":129},[123,1027,787],{"class":129},[123,1029,1031,1033,1035,1038,1040],{"class":125,"line":1030},25,[123,1032,835],{"class":152},[123,1034,224],{"class":129},[123,1036,1037],{"class":192},"LCL管制下限",[123,1039,224],{"class":129},[123,1041,787],{"class":129},[123,1043,1045,1047],{"class":125,"line":1044},26,[123,1046,423],{"class":129},[123,1048,227],{"class":152},[123,1050,1052],{"class":125,"line":1051},27,[123,1053,265],{"emptyLinePlaceholder":264},[123,1055,1057,1060],{"class":125,"line":1056},28,[123,1058,1059],{"class":152},"var values = ",[123,1061,752],{"class":129},[123,1063,1065,1067,1069,1071,1073,1075,1077,1079,1081,1083,1085,1087],{"class":125,"line":1064},29,[123,1066,757],{"class":152},[123,1068,761],{"class":760},[123,1070,237],{"class":129},[123,1072,766],{"class":760},[123,1074,237],{"class":129},[123,1076,771],{"class":760},[123,1078,237],{"class":129},[123,1080,776],{"class":760},[123,1082,237],{"class":129},[123,1084,781],{"class":760},[123,1086,784],{"class":152},[123,1088,787],{"class":129},[123,1090,1092,1094,1096,1098,1100,1102,1104,1106,1108,1110,1112,1114],{"class":125,"line":1091},30,[123,1093,792],{"class":152},[123,1095,894],{"class":760},[123,1097,237],{"class":129},[123,1099,766],{"class":760},[123,1101,237],{"class":129},[123,1103,776],{"class":760},[123,1105,237],{"class":129},[123,1107,766],{"class":760},[123,1109,237],{"class":129},[123,1111,771],{"class":760},[123,1113,784],{"class":152},[123,1115,787],{"class":129},[123,1117,1119,1121,1123,1126,1128],{"class":125,"line":1118},31,[123,1120,821],{"class":152},[123,1122,224],{"class":129},[123,1124,1125],{"class":192},"lines+markers",[123,1127,224],{"class":129},[123,1129,787],{"class":129},[123,1131,1133,1135,1137,1140,1142],{"class":125,"line":1132},32,[123,1134,835],{"class":152},[123,1136,224],{"class":129},[123,1138,1139],{"class":192},"不良率(%)",[123,1141,224],{"class":129},[123,1143,787],{"class":129},[123,1145,1147,1149],{"class":125,"line":1146},33,[123,1148,423],{"class":129},[123,1150,227],{"class":152},[123,1152,1154],{"class":125,"line":1153},34,[123,1155,265],{"emptyLinePlaceholder":264},[123,1157,1159],{"class":125,"line":1158},35,[123,1160,1161],{"class":152},"var data = [ucl, cl, lcl, values];\n",[123,1163,1165],{"class":125,"line":1164},36,[123,1166,265],{"emptyLinePlaceholder":264},[123,1168,1170,1173],{"class":125,"line":1169},37,[123,1171,1172],{"class":152},"var layout = ",[123,1174,752],{"class":129},[123,1176,1178,1181,1183,1186,1188,1190,1193,1195],{"class":125,"line":1177},38,[123,1179,1180],{"class":152},"  title: ",[123,1182,718],{"class":129},[123,1184,1185],{"class":133}," text",[123,1187,301],{"class":129},[123,1189,218],{"class":129},[123,1191,1192],{"class":192},"P-Chart",[123,1194,224],{"class":129},[123,1196,1197],{"class":129}," },\n",[123,1199,1201,1203],{"class":125,"line":1200},39,[123,1202,423],{"class":129},[123,1204,227],{"class":152},[123,1206,1208],{"class":125,"line":1207},40,[123,1209,265],{"emptyLinePlaceholder":264},[123,1211,1213,1216],{"class":125,"line":1212},41,[123,1214,1215],{"class":152},"onMounted(() => ",[123,1217,752],{"class":129},[123,1219,1221,1224,1226,1229,1232,1234,1236,1238,1241,1243],{"class":125,"line":1220},42,[123,1222,1223],{"class":152},"  Plotly",[123,1225,30],{"class":129},[123,1227,1228],{"class":280},"newPlot",[123,1230,1231],{"class":152},"(chart",[123,1233,30],{"class":129},[123,1235,481],{"class":152},[123,1237,237],{"class":129},[123,1239,1240],{"class":152}," data",[123,1242,237],{"class":129},[123,1244,1245],{"class":152}," layout);\n",[123,1247,1249,1251],{"class":125,"line":1248},43,[123,1250,423],{"class":129},[123,1252,1253],{"class":152},");\n",[123,1255,1257,1259,1261],{"class":125,"line":1256},44,[123,1258,156],{"class":129},[123,1260,537],{"class":133},[123,1262,137],{"class":129},[21,1264,1265,1266],{},"The result is shown in the figure below：\n",[63,1267],{"alt":1268,"className":1269,"height":77,"src":1270,"width":77},"Plotly.js畫出的基本P-Chart",[67],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FbasicPChart.png",[21,1272,1273,1274],{},"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",[63,1275],{"alt":1276,"className":1277,"height":77,"src":1278,"width":77},"Plotly.js畫出的進階P-Chart",[67],"\u002Fimages\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",[21,1280,1281],{},"The same charting techniques can be extended to other statistical process control charts, including:",[21,1283,1284],{},"C-Chart,\nNP-Chart,\nU-Chart\nXBar-R-Chart\nXBar-S-Chart\nXMed-R-Chart\nX-MR-Chart,\nMA-Chart\nI-MR-Chart",[21,1286,566,1287,571],{},[25,1288,1290],{"href":1289},"\u002Fsolutions\u002Fspc","SPC",[21,1292,1293],{},[25,1294,577],{"href":576},[579,1296,1297],{},"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":44,"searchDepth":140,"depth":140,"links":1299},[],"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.",{"src":1303},"images\u002Fblogs\u002FplotlyJs\u002FpChartAdvantage.png",{},"\u002Fblog\u002Fen\u002Fplotlyjs",{"title":599,"description":1301},"blog\u002Fen\u002FplotlyJs","c6csrXTTZ9-gd8qAKX2cJpNitfLeuDcWGQxEl3H7THU",1791796703152]