首页 > 解决方案 > chart js:折线图,数据点在图表的左侧压缩显示

问题描述

这是我的图表 在此处输入图像描述

问题是我不明白为什么所有点都集中在图表的左侧,我希望看到它们从左到右分布,但我找不到任何可以帮助的东西,这是我的代码图表

                var ctx = this.shadowRoot.querySelector("#chart").getContext("2d");
                var labels = [0, 0.1];
                window.chart = new Chart(ctx, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            data: avg,
                            label: "Avg_x",
                            borderColor: "#40E0D0",
                            fill: false
                        }, {
                            data: avg2,
                            label: "Avg_y",
                            borderColor: "#008B8B",
                            fill: false
                        }, {
                            data: avg3,
                            label: "Avg_z",
                            borderColor: "#7FFFD4",
                            fill: false
                        }, {
                            data: sdv,
                            label: "Sdv_x",
                            borderColor: "#32CD32",
                            fill: false
                        }, {
                            data: sdv2,
                            label: "Sdv_y",
                            borderColor: "#7CFC00",
                            fill: false
                        }, {
                            data: sdv3,
                            label: "Sdv_z",
                            borderColor: "#006400",
                            fill: false
                        }, {
                            data: max,
                            label: "Max_x",
                            borderColor: "#87CEFA",
                            fill: false
                        }, {
                            data: max2,
                            label: "Max_y",
                            borderColor: "#4682B4",
                            fill: false
                        }, {
                            data: max3,
                            label: "Max_z",
                            borderColor: "#00008B",
                            fill: false
                        }, {
                            data: min,
                            label: "Min_x",
                            borderColor: "#FF6347",
                            fill: false
                        }, {
                            data: min2,
                            label: "Min_y",
                            borderColor: "#FFD700",
                            fill: false
                        }, {
                            data: min3,
                            label: "Min_z",
                            borderColor: "#FFA500",
                            fill: false
                        }
                        ]
                    },
                    options: {
                        maintainAspectRatio: false,
                        scales: {
                            yAxes: [{
                                stacked: true
                            }],
                            xAxes: [{
                                ticks: {
                                    maxTicksLimit: 5,
                                    display: false,
                                }
                            }]
                        },
                        title: {
                            display: true,
                            text: name,
                        },
                        legend: {
                            display: true,
                            position: 'top',
                            labels: {
                                fontSize: 8,
                                boxWidth: 5,
                        }
                        },
                    }
                });

我在数据集中提供的数据数组基本上是数值数组。对于如何使这些数据点从左到右分布在图表中的任何帮助或建议,我将不胜感激。在此先感谢。

编辑:

也添加数据数组:

avg=[0.002, 0.0005, 0.0003333333333333333, 0.00175, 0.002, -0.02183333333333333, -0.005142857142857141, 0.53975, 0.3872222222222222, -0.039899999999999956, 0.16963636363636364, 0.49841666666666673, 0.4976153846153846, 0.2921428571428572, 0.32426666666666665, 0.6719375000000001, 0.8395882352941179, 0.9671111111111111, 0.8511052631578947, 0.6095500000000001, 0.4833809523809525, 0.572818181818182, 0.7066086956521739, 0.817125, 0.6850799999999999, 0.7181538461538461, 0.893962962962963, 1.0072499999999998, 1.135793103448276, 1.0535333333333334, 0.8088387096774193, 0.92796875, 1.1216969696969699, 1.2340588235294119, 1.0098857142857145, 0.8949444444444445, 0.9956216216216216, 1.1494473684210529, 1.1102051282051284, 1.0442500000000001, 1.1833170731707319, 1.0556190476190477, 0.8950232558139537, 1.0369545454545455, 1.0394444444444446, 0.8836739130434784, 0.9986808510638299, 0.9815625, 0.8174081632653064, 0.93328, 0.9845098039215688, 0.8887115384615386, 0.9355849056603774, 0.9622592592592594, 0.8674000000000002, 0.9069464285714288, 0.8424035087719299, 0.787793103448276, 0.7744237288135595]
avg2=[0.001, 0.0015, 0.0006666666666666666, 0.003, 0.0156, -0.015000000000000001, 0.07328571428571427, -0.4657500000000001, -0.2183333333333333, 0.15960000000000002, 0.20963636363636357, 0.0012499999999999794, -0.0450769230769231, 0.11907142857142858, 0.40953333333333325, 0.6309375000000002, 0.5853529411764706, 0.33105555555555544, 0.2509473684210526, 0.3072499999999999, 0.4339523809523809, 0.7499545454545454, 0.8747391304347826, 0.6356666666666667, 0.66892, 0.8328076923076922, 0.9884444444444446, 0.9323214285714287, 0.758896551724138, 0.7152666666666666, 0.741258064516129, 0.8671562500000001, 0.7729090909090909, 0.6640588235294117, 0.6941714285714286, 0.6855833333333332, 0.7229189189189189, 0.8228157894736843, 0.7155384615384615, 0.6310499999999999, 0.5645853658536585, 0.5952619047619047, 0.6731627906976744, 0.6197499999999999, 0.6039777777777778, 0.6289347826086956, 0.6050212765957447, 0.5944791666666666, 0.6192857142857144, 0.55584, 0.5097058823529411, 0.533826923076923, 0.6238490566037738, 0.5073333333333333, 0.5332181818181818, 0.5581071428571428, 0.5194736842105263, 0.5204827586206898, 0.5117627118644069]
avg3=[0, 0, -0.0003333333333333333, 0, 0.0019999999999999996, 0.06616666666666667, 0.10271428571428573, -0.27725, -0.34555555555555556, -0.22970000000000002, -0.2169090909090909, -0.15716666666666665, -0.06907692307692306, 0.1870714285714285, 0.21699999999999994, 0.2333749999999999, 0.3816470588235295, 0.5517777777777778, 0.6616315789473683, 0.9094, 1.030142857142857, 1.0035454545454545, 1.008391304347826, 1.125125, 1.29964, 1.3393461538461542, 1.266740740740741, 1.2965357142857148, 1.3870000000000002, 1.4218000000000004, 1.5468064516129034, 1.5120937500000002, 1.5013939393939395, 1.496294117647059, 1.6226571428571432, 1.726250000000001, 1.7045405405405414, 1.723052631578948, 1.5837435897435903, 1.3765000000000003, 1.4173658536585367, 1.4855476190476196, 1.5364651162790703, 1.4685454545454548, 1.4478222222222226, 1.4708043478260873, 1.403702127659575, 1.3946458333333336, 1.428714285714286, 1.3580200000000002, 1.329921568627451, 1.404269230769231, 1.4021509433962265, 1.4395185185185186, 1.4831454545454548, 1.4642857142857146, 1.4657368421052634, 1.453241379310345, 1.4285932203389835]
sdv=[0, 0.0015, 0.0012472191289246471, 0.002680951323690902, 0.002449489742783178, 0.05333984335268419, 0.0641102366941473, 1.4428977571193324, 1.427145229530912, 1.8641270584378093, 1.8968706417162344, 2.118333403815892, 2.0352307953970588, 2.0964593913529153, 2.0289355983426933, 2.381683975382492, 2.4059208597522495, 2.3965245180118853, 2.3839634378761336, 2.55102872337808, 2.5526902238001403, 2.52745219604759, 2.5503083486056863, 2.552251609078084, 2.5830001768486195, 2.5382327997175773, 2.647194734353939, 2.665311207037021, 2.7058410048265427, 2.696990257470147, 2.972437200256602, 2.999871356454046, 3.150794219114117, 3.1705125670333274, 3.387265486000922, 3.4084101290814, 3.415870577579857, 3.4980883328000774, 3.461413103902962, 3.442600650307846, 3.512267688274735, 3.5652331851365755, 3.674031569843046, 3.7493915261166975, 3.707534356208872, 3.812989595387964, 3.8520092138065225, 3.8134791579029796, 3.9419885943899815, 3.9857717498120735, 3.963092669217545, 3.9839811424896348, 3.9606668508179768, 3.9286250407187513, 3.954665836245034, 3.930155569529218, 3.9253563336278905, 3.9131510045971933, 3.8811827535194223]
sdv2=[0, 0.0005, 0.0012472191289246471, 0.004183300132670378, 0.025476263462289758, 0.07226801966753113, 0.2263686716624102, 1.441788451021855, 1.52888892118863, 1.8409925692408426, 1.7624346937083306, 1.8234587156006576, 1.7592573809833454, 1.7956048906898723, 2.0470476583498383, 2.1595835092891753, 2.1030232842876595, 2.297029107159028, 2.2614491505200403, 2.2178084650167604, 2.237302318507513, 2.622022631433998, 2.6303337731234846, 2.8186802270250912, 2.7665318927494766, 2.833867512499899, 2.891912968483656, 2.8547365409284695, 2.951378664926141, 2.9112686116002573, 2.8674638222848405, 2.908051120481883, 2.912857134963064, 2.937036290720695, 2.9000948209691777, 2.8599833952023803, 2.829950418612354, 2.857814456200137, 2.897414487100383, 2.9092145241456495, 2.9041011537144077, 2.876035764228286, 2.886883850945172, 2.8753022222573716, 2.845099166316148, 2.8189800067321134, 2.7935418416096622, 2.765233926132225, 2.7422627108849733, 2.7507902963330375, 2.743154304982822, 2.7221056309772815, 2.773347724295963, 2.875508064608692, 2.855589394286288, 2.835991359034862, 2.8258320687695555, 2.801375888807568, 2.778327763967621]
sdv3= [0, 0, 0.0004714045207910317, 0.0007071067811865475, 0.004049691346263317, 0.14352864599870727, 0.16022458727469682, 1.01640195665888, 0.9775542168665532, 0.9903805379751764, 0.9451566925932013, 0.9263576373206098, 0.9408748352577517, 1.2942060701607052, 1.2553265710563128, 1.2171181575241576, 1.3213593242066368, 1.4632316424634115, 1.498526476612286, 1.8165068510743363, 1.8531447476606657, 1.8146359947351505, 1.7748945526334414, 1.825487773000685, 1.9824331086823586, 1.9540471008870814, 1.9529315778079506, 1.923979868511824, 1.9501794258743093, 1.9265374708701273, 2.0150974429229236, 1.992756262682654, 1.9632639634716216, 1.9343988202663254, 2.0439878381362693, 2.106522178259702, 2.081939436180609, 2.0574466156324167, 2.204997107015356, 2.5328853606114903, 2.515120903422741, 2.5230570667383128, 2.5152859779970758, 2.52611128069991, 2.5016652079843755, 2.4791220625154105, 2.4944746593552893, 2.4691345016150845, 2.4551814430643093, 2.4803717502826057, 2.463957766724393, 2.4972469850693324, 2.4736230276411293, 2.465665297798583, 2.4640916409919926, 2.4459939676532154, 2.4244672594513275, 2.4053265339324468, 2.392231517044384]
max=[0.002, 0.002, 0.006, 0.006, 0.006, 0.095, 4.354, 4.354, 4.354, 4.354, 4.354, 4.354, 4.354, 4.354, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 5.887, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321, 7.321]
max2=[0.002, 0.002, 0.01, 0.066, 0.066, 0.603, 0.603, 1.761, 3.561, 3.561, 3.561, 3.561, 3.561, 4.476, 4.476, 4.476, 4.476, 4.476, 4.476, 4.476, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386, 7.386]
max3=[0, 0, 0.001, 0.01, 0.387, 0.387, 0.387, 0.387, 0.813, 0.813, 0.813, 0.988, 3.517, 3.517, 3.517, 3.517, 3.517, 3.517, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.617, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919, 5.919]
min=[-0.001, -0.001, -0.001, -0.001, -0.141, -0.141, -0.141, -0.833, -3.884, -3.884, -3.884, -3.884, -3.884, -3.884, -3.884, -3.884, -3.884, -3.884, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -3.98, -6.532, -6.532, -6.532, -6.532, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -6.612, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062, -7.062]
min2=[0.001, -0.001, -0.001, -0.001, -0.168, -0.168, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.239, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -4.863, -5.668, -5.668, -5.668, -5.668, -5.668, -5.668]
min3=[-0.001, -0.001, -0.001, -0.001, -0.001, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -2.937, -3.71, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706, -6.706]

标签: javascriptchartschart.jslinechartchartjs-2.6.0

解决方案


推荐阅读