chart.js 創建的圖表中有“未定義”

Question

Chart.js v3.7.0 和 v2.9.4 創建的圖表中出現未定義，如圖所示。 我的圖表

而生成圖形的function、div和canvas為（JS）如下：

 function arrangeForGraph(counts){ for(var i =0;i<counts.length;i++){ var divname = document.createElement("div"); divname.id="div"+i; divname.class="chartAreaWrapper;chart"; var dataname = document.createElement("data"); var _canvas = document.createElement("canvas"); _canvas.id="canvas"+i; _canvas.height="400"; _canvas.width="600"; _label_list = counts[i][4]; dataname.id=_label_list; dataname.value= counts[i][0]; dataname.style="display:none;" dataname.title="countchart"; dataname.text="countsch"; var ctx = _canvas.getContext("2d"); ctx.imageSmoothingEnabled = true; Chart.plugins.register({id: 'pan', id:'zoom'}); var myChart = new Chart(ctx, { type: 'line', data: { labels: _label_list, datasets: [ { label: "Upper Bound", data: counts[i][3], backgroundColor: ['rgba(150, 150, 150, 0.50)'], borderColor: ['rgba(150, 150, 150, 0.50)'], borderWidth: 0.5, pointRadius: 1, fill: 1, }, { label: "Lower Bound", data: counts[i][1], backgroundColor: ['rgba(150, 150, 150, 0.50)'], borderColor: ['rgba(150, 150, 150, 0.50)'], borderWidth: 0.5, pointRadius: 1, fill: false, }, { label: "Value", order: 1, data: counts[i][0], backgroundColor: 'rgba(75, 192, 192, 0.85)', borderColor: 'rgba(75, 192, 192, 0.85)', borderWidth: 2, pointRadius: 3, fill: false, }, { label: "Prediction", order: 1, data: counts[i][2], backgroundColor: 'rgba(100, 100, 100, 0.85)', borderColor: 'rgba(100, 100, 100, 0.85)', borderWidth: 2, pointRadius: 3, fill: false, }, ] }, options: { pan: { enabled: true, mode: 'xy' }, zoom: { enabled: true, drag: true, speed: 0.1, threshold: 2, mode: 'xy' }, title:{ text: "Behaviours", display: true, fontSize: 15 }, legend: { display: false}, elements: {center:{}}, responsive: true, scales: { xAxes: [{scaleLabel: {display: true, labelString: 'Date & Time'}}], yAxes: [{scaleLabel: {display: true, labelString: 'Parameter Values'},ticks: {beginAtZero: true}}] } }, });console.log(myChart); document.getElementById("main2").appendChild(divname); document.getElementById(divname.id).appendChild(_canvas); document.getElementById(_canvas.id).appendChild(dataname); }; }

有人指出我的錯誤，以便我可以刪除那個煩人的未定義水印嗎？

該圖是使用來自服務器端的數組生成的，如果在 counts 中找到超過 1 個數組，則生成 counts.length 個圖，除了每個圖上的未定義標記外，沒有任何錯誤。

平移和縮放效果不佳，但我想我必須為此提出另一個問題。

提前致謝

編輯：

計數 =[[2, 3, 2, 0, 2, 2, 1, 2, 5, 1, 1, 0, 4, 1, 3, 0, 2, 3, 0, 0, 3, 1, 1, 2, 1, 7, 8, 3, 9, 20, 3, 10, 14, 9, 4, 11, 26, 17, 22, 17, 8, 11, 14, 0, 1, 10, 20, 32, 39, 41, 15, 25, 36, 3, 3, 4, 9, 8, 12, 6, 5, 8, 4, 3, 4, 7, 5, 2, 1, 2, 4, 2, 3, 0, 4, 7, 13, 4, 1, 4, 3, 14, 4, 4, 3, 4, 2, 3, 7, 1, 3, 3, 8, 2, 3, 2, 4, 3, 7, 5, 1, 1, 3, 4, 5, 7, 3, 3, 6, 3, 5, 2, 3, 0, 1, 0, 24, 28, 4, 4, 5, 2, 4, 5, 3, 6, 6, 2, 2, 1, 2, 1, 1, 5, 4, 4, 2, 6, 6, 2, 2, 3, 8, 3, 3], [Decimal('- 5.02379')、十進制('-4.99941')、十進制('-4.50109')、十進制('-4.69107')、十進制('-5.79913')、十進制('-5.32389')、十進制('-4.47361' )、十進制('-5.26524')、十進制('-5.23322')、十進制('-3.63338')、十進制('-4.58475')、十進制('-6.06872')、十進制('-5.62456')、十進制('-4.22436')、十進制('-4.56806')、十進制('-5.19584')、十進制('-5.25142')、十進制('-5.32266')、十進制('-4.28239')、十進制( '-5.32152')、十進制('-6.29455')、十進制('-4.59444')、十進制('-4.58253')、十進制('-5.78550')、十進制('-5.04559')、十進制 al('-4.94003')、十進制('-3.49258')、十進制('-1.70510')、十進制('-4.22833')、十進制('-3.52883')、十進制('2.32241')、十進制(' -2.35649')、十進制('-5.28643')、十進制('0.77526')、十進制('-0.21235')、十進制('-3.89572')、十進制('-1.22256')、十進制('6.30103') , 十進制('5.53760'), 十進制('5.53476'), 十進制('7.52865'), 十進制('2.21410'), 十進制('2.29482'), 十進制('4.93989'), 十進制('-1.07637') , 十進制('-3.65299'), 十進制('1.13108'), 十進制('5.06221'), 十進制('11.38730'), 十進制('17.05850'), 十進制('20.76260'), 十進制('8.39483') , 十進制('10.55110'), 十進制('22.61550'), 十進制('5.46830'), 十進制('-0.54232'), 十進制('1.68621'), 十進制('2.62207'), 十進制('1.28697') , 十進制('2.57310'), 十進制('-0.59782'), 十進制('-2.52453'), 十進制('-1.09690'), 十進制('-3.52609'), 十進制('-5.18571'), 十進制( '-4.88903')、十進制('-3.62987')、十進制('-4.72965')、十進制('-6.75096')、十進制('-7.58061')、十進制('-7.34248')、十進制('- 6.54829'), 十進制('-7.60781'), 十進制('-7.50 315')、十進制('-8.84574')、十進制('-7.40102')、十進制('-5.46129')、十進制('-2.44954')、十進制('-6.13441')、十進制('-8.44340' )、十進制('-6.61738')、十進制('-6.95528')、十進制('-2.19336')、十進制('-5.66007')、十進制('-7.11027')、十進制('-6.73448')、十進制('-6.56465')、十進制('-7.58405')、十進制('-7.41519')、十進制('-5.39759')、十進制('-7.98707')、十進制('-7.85621')、十進制( '-7.34767')、十進制('-5.38887')、十進制('-7.50762')、十進制('-7.61573')、十進制('-7.66213')、十進制('-6.79566')、十進制('- 7.09190')、十進制('-5.43439')、十進制('-5.88845')、十進制('-7.76656')、十進制('-8.25114')、十進制('-7.21203')、十進制('-6.35874' )、十進制('-5.86959')、十進制('-4.81169')、十進制('-6.05118')、十進制('-6.55131')、十進制('-5.17711')、十進制('-6.05328')、十進制('-5.60891')、十進制('-6.51707')、十進制('-6.61051')、十進制('-7.78867')、十進制('-7.97757')、十進制('-8.40487')、十進制( '1.02573')、十進制('7.08680')、十進制('-3.98514')、十進制('-4.54250')、十進制( '-4.01628')、十進制('-5.68370')、十進制('-5.46256')、十進制('-5.09368')、十進制('-6.21006')、十進制('-5.11244')、十進制('- 4.94492')、十進制('-6.86292')、十進制('-7.18263')、十進制('-7.73950')、十進制('-7.62207')、十進制('-8.21234')、十進制('-8.46901' )、十進制('-6.75024')、十進制('-6.99760')、十進制('-7.03625')、十進制('-7.81642')、十進制('-6.11583')、十進制('-5.79499')、十進制('-7.57666'), 十進制('-7.71903'), 十進制('-7.28183'), 十進制('-5.08020'), 十進制('-6.99838')], [十進制('9.94791'), 十進制('9.98058')、十進制('10.46990')、十進制('10.27960')、十進制('9.18582')、十進制('9.65369')、十進制('10.49650')、十進制('9.71640')、十進制( '9.72258')、十進制('11.32870')、十進制('10.40170')、十進制('8.92187')、十進制('9.37201')、十進制('10.73210')、十進制('10.38960')、十進制(' 9.76525')、十進制('9.70999')、十進制('9.62846')、十進制('10.66740')、十進制('9.63372')、十進制('8.65963')、十進制('10.36630')、十進制('10.38040 '), 十進制('9.18541'), 十進制('9.9 2102')、十進制('10.01480')、十進制('11.50860')、十進制('13.32200')、十進制('10.81450')、十進制('11.57650')、十進制('17.92330')、十進制('13.33680 ')、十進制('10.44450')、十進制('16.80440')、十進制('15.82140')、十進制('12.14720')、十進制('14.90680')、十進制('23.08330')、十進制('22.32770' )、十進制('22.34240')、十進制('24.35300')、十進制('19.14770')、十進制('19.23020')、十進制('21.88420')、十進制('16.16900')、十進制('13.66310') , 十進制('18.48850'), 十進制('22.54550'), 十進制('29.39600'), 十進制('35.51820'), 十進制('39.39600'), 十進制('27.40230'), 十進制('29.62130'),十進制('42.02920'), 十進制('25.99800'), 十進制('20.22650'), 十進制('22.50060'), 十進制('23.40670'), 十進制('22.10460'), 十進制('23.38850'), 十進制('20.26890')、十進制('18.35720')、十進制('19.78110')、十進制('17.39220')、十進制('15.75140')、十進制('16.05070')、十進制('17.31020')、十進制( '16.20940')、十進制('14.20010')、十進制('13.38010')、十進制('13.61940')、十進制('14.41380')、十進制 al('13.35810')、十進制('13.45770')、十進制('12.12770')、十進制('13.58010')、十進制('15.53700')、十進制('18.63790')、十進制('14.97470')、十進制('12.68040')、十進制('14.51110')、十進制('14.13970')、十進制('19.05020')、十進制('15.61050')、十進制('14.16140')、十進制('14.53250')、十進制( '14.66620')、十進制('13.64820')、十進制('13.79750')、十進制('15.82270')、十進制('13.21160')、十進制('13.32910')、十進制('13.78200')、十進制(' 15.56840')、十進制('13.31110')、十進制('13.05690')、十進制('12.93760')、十進制('13.46010')、十進制('13.11120')、十進制('14.76770')、十進制('14.29330') ')、十進制('12.38460')、十進制('11.46900')、十進制('12.38720')、十進制('12.82150')、十進制('13.30390')、十進制('14.37800')、十進制('13.12750' )、十進制('12.56640')、十進制('13.93010')、十進制('13.05690')、十進制('13.40700')、十進制('12.50060')、十進制('12.40380')、十進制('11.23860') , 十進制('11.04710'), 十進制('10.62180'), 十進制('20.87000'), 十進制('27.34260'), 十進制('16.50340' )、十進制('16.08300')、十進制('16.60300')、十進制('14.94990')、十進制('15.05020')、十進制('15.41590')、十進制('14.30570')、十進制('15.40340') , 十進制('15.55870'), 十進制('13.65000'), 十進制('13.32820'), 十進制('12.72640'), 十進制('12.84370'), 十進制('12.24610'), 十進制('11.99100'),十進制（'13.72490'），十進制（'13.47770'），十進制（'13.43960'），十進制（'12.66120'），十進制（'14.37990'），十進制（'14.70500'），十進制（'12.93100'），十進制('12.78710'), 十進制('13.22200'), 十進制('15.45430'), 十進制('13.53570')], [十進制('2.46206'), 十進制('2.49059'), 十進制('2.98443'),十進制（'2.79425'），十進制（'1.69334'），十進制（'2.16490'），十進制（'3.01146'），十進制（'2.22558'），十進制（'2.24468'），十進制（'3.84765'），十進制('2.90847')、十進制('1.42657')、十進制('1.87373')、十進制('3.25388')、十進制('2.91079')、十進制('2.28470')、十進制('2.22928')、十進制( '2.15290')、十進制('3.19253')、十進制('2.15610')、十進制('1.18254')、十進制('2.88595')、十進制('2.89893')、十進制('1 .69995')、十進制('2.43771')、十進制('2.53738')、十進制('4.00799')、十進制('5.80846')、十進制('3.29309')、十進制('4.02385')、十進制(' 10.12290')、十進制('5.49017')、十進制('2.57901')、十進制('8.78984')、十進制('7.80454')、十進制('4.12572')、十進制('6.84214')、十進制('14.69220 ')、十進制('13.93260')、十進制('13.93860')、十進制('15.94080')、十進制('10.68090')、十進制('10.76250')、十進制('13.41210')、十進制('7.54633' )、十進制('5.00506')、十進制('9.80978')、十進制('13.80380')、十進制('20.39160')、十進制('26.28830')、十進制('30.07930')、十進制('17.89860') , 十進制('20.08620'), 十進制('32.32240'), 十進制('15.73310'), 十進制('9.84210'), 十進制('12.09340'), 十進制('13.01440'), 十進制('11.69580'),十進制（'12.98080'），十進制（'9.83557'），十進制（'7.91631'），十進制（'9.34208'），十進制（'6.93307'），十進制（'5.28285'），十進制（'5.58085'），十進制('6.84017')、十進制('5.73990')、十進制('3.72457')、十進制('2.89974')、十進制('3.13847')、十進制('3.93276')、十進制('2 .87517')、十進制('2.97728')、十進制('1.64099')、十進制('3.08955')、十進制('5.03786')、十進制('8.09416')、十進制('4.42012')、十進制(' 2.11851')、十進制('3.94687')、十進制('3.59219')、十進制('8.42840')、十進制('4.97522')、十進制('3.52558')、十進制('3.89902')、十進制('4.05077) ')、十進制('3.03207')、十進制('3.19117')、十進制('5.21256')、十進制('2.61228')、十進制('2.73646')、十進制('3.21716')、十進制('5.08978' )、十進制('2.90171')、十進制('2.72061')、十進制('2.63775')、十進制('3.33224')、十進制('3.00965')、十進制('4.66666')、十進制('4.20244') , 十進制('2.30902'), 十進制('1.60894'), 十進制('2.58757'), 十進制('3.23135'), 十進制('3.71718'), 十進制('4.78314'), 十進制('3.53814'),十進制('3.00754')、十進制('4.37649')、十進制('3.50183')、十進制('3.89907')、十進制('2.99177')、十進制('2.89664')、十進制('1.72496')、十進制('1.53474')、十進制('1.10846')、十進制('10.94790')、十進制('17.21470')、十進制('6.25915')、十進制('5.77024')、十進制('6.29337')、十進制( '4.63308')、十進制('4.79381')、十進制('5.16111')、十進制('4.04784')、十進制('5.14547')、十進制('5.30690')、十進制('3.39354')、十進制(' 3.07277')、十進制('2.49346')、十進制('2.61080')、十進制('2.01689')、十進制('1.76100')、十進制('3.48735')、十進制('3.24005')、十進制('3.20165 ')、十進制('2.42237')、十進制('4.13206')、十進制('4.45499')、十進制('2.67716')、十進制('2.53404')、十進制('2.97008')、十進制('5.18703' ), Decimal('3.26866')], ['2021-12-25 06:35', '2021-12-25 06:40', '2021-12-25 06:45', '2021-12-25 06:50'、'2021-12-25 06:55'、'2021-12-25 07:00'、'2021-12-25 07:05'、'2021-12-25 07:10'、' 2021-12-25 07:15'、'2021-12-25 07:20'、'2021-12-25 07:25'、'2021-12-25 07:30'、'2021-12-25 07 :35'、'2021-12-25 07:40'、'2021-12-25 07:45'、'2021-12-25 07:50'、'2021-12-25 07:55'、'2021 -12-25 08:00'、'2021-12-25 08:05'、'2021-12-25 08:10'、'2021-12-25 08:15'、'2021-12-25 08: 20'、'2021-12-25 08:25'、'2021-12-25 08:30'、'2021-12-25 08:35'、'2021-12-25 08:40'、'2021- 12-25 08:45', '2021- 12-25 08:50'、'2021-12-25 08:55'、'2021-12-25 09:00'、'2021-12-25 09:05'、'2021-12-25 09:10 '、'2021-12-25 09:15'、'2021-12-25 09:20'、'2021-12-25 09:25'、'2021-12-25 09:30'、'2021-12 -25 09:35'、'2021-12-25 09:40'、'2021-12-25 09:45'、'2021-12-25 09:50'、'2021-12-25 09:55' , '2021-12-25 10:00', '2021-12-25 10:05', '2021-12-25 10:10', '2021-12-25 10:15', '2021-12- 25 10:20'、'2021-12-25 10:25'、'2021-12-25 10:30'、'2021-12-25 10:35'、'2021-12-25 10:40'、 '2021-12-25 10:45'、'2021-12-25 10:50'、'2021-12-25 10:55'、'2021-12-25 11:00'、'2021-12-25 11:05'、'2021-12-25 11:10'、'2021-12-25 11:15'、'2021-12-25 11:20'、'2021-12-25 11:25'、' 2021-12-25 11:30'、'2021-12-25 11:35'、'2021-12-25 11:40'、'2021-12-25 11:45'、'2021-12-25 11 :50'、'2021-12-25 11:55'、'2021-12-25 12:00'、'2021-12-25 12:05'、'2021-12-25 12:10'、'2021 -12-25 12:15'、'2021-12-25 12:20'、'2021-12-25 12:25'、'2021-12-25 12:30'、'2021-12-25 12: 35'、'2021-12-25 12:40'、'2021-12-25 12:45'、'2021-12-25 12:50'、'2021-12-25 12:55'、'2021- 12-25 13:00'、'2021-12-25 13:05'、'2021-12-25 13:10'、'2021-12-25 13:15'、'2021-12-25 13:20 '、'2021-12-25 13:25'、'2021-12-25 13:30'、'2021-12-25 13:35'、'2021-12-25 13:40'、'2021-12 -25 13:45'、'2021-12-25 13:50'、'2021-12-25 13:55'、'2021-12-25 14:00'、'2021-12-25 14:05' , '2021-12-25 14:10', '2021-12-25 14:15', '2021-12-25 14:20', '2021-12-25 14:25', '2021-12- 25 14:30'、'2021-12-25 14:35'、'2021-12-25 14:40'、'2021-12-25 14:45'、'2021-12-25 14:50'、 '2021-12-25 14:55'、'2021-12-25 15:00'、'2021-12-25 15:05'、'2021-12-25 15:10'、'2021-12-25 15:15'、'2021-12-25 15:20'、'2021-12-25 15:25'、'2021-12-25 15:30'、'2021-12-25 15:35'、' 2021-12-25 15:40'、'2021-12-25 15:45'、'2021-12-25 15:50'、'2021-12-25 15:55'、'2021-12-25 16 :00'、'2021-12-25 16:05'、'2021-12-25 16:10'、'2021-12-25 16:15'、'2021-12-25 16:20'、'2021 -12-25 16:25'、'2021-12-25 16:30'、'2021-12-25 16:35'、'2021-12-25 16:40'、'2021-12-25 16: 45'、'2021-12-25 16:50'、'2021-12-25 16:55'、'2021-12-25 17:00'、'2021-12-25 17:05'、'2021- 12-25 17:10'、'2021-12-25 17:15'、'2021-12-25 17:20'、'2021-12-25 17:25'、'2021-12-25 17:30 '、'2021-12-25 17:35'、'2021-12-25 17:40'、'2021-12-25 17:45'、'2021-12-25 17:50'、'2021-12 -25 17:55'、'2021-12-25 18:00'、'2021-12-25 18:05'、'2021-12-25 18:10'、'2021-12-25 18:15' , '2021-12-25 18:20', '2021-12-25 18:25', '2021-12-25 18:30', '2021-12-25 18:35']]

Answer 1

其實我已經設法解決了。

問題出在這里：元素：{center:{}}，

所以我把它改成了：elements:{center:{text:""}},

如果有人遇到同樣的問題，現在對 go 很好。