ChartJS不加载数据,但输入硬编码的相同数据工作

yhqotfr8  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(134)

因此我得到了这个chartJS(react)元素,当我使用硬编码数据时,它工作得非常好:

<Line data={{
                    labels: ['2022-07-04', '2022-07-03', '2022-07-02', '2022-06-27'],
                    datasets: [
                      {
                        label: 'My First dataset',
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: 'rgba(75,192,192,0.4)',
                        borderColor: 'rgba(75,192,192,1)',
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: 'rgba(75,192,192,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                        pointHoverBorderColor: 'rgba(220,220,220,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: [3.1, 3.1, 3.1, 2.74]
                      },
                    ]
               }}
           />

然而,当我将数据和标签更改为数组时,我将完全相同的数据推送到数组中,当我控制台记录它时,它返回完全相同的数组,它不会填满图表。

<Line data={{
                    labels: dateArray,
                    datasets: [
                      {
                        label: 'My First dataset',
                        fill: false,
                        lineTension: 0.1,
                        backgroundColor: 'rgba(75,192,192,0.4)',
                        borderColor: 'rgba(75,192,192,1)',
                        borderCapStyle: 'butt',
                        borderDash: [],
                        borderDashOffset: 0.0,
                        borderJoinStyle: 'miter',
                        pointBorderColor: 'rgba(75,192,192,1)',
                        pointBackgroundColor: '#fff',
                        pointBorderWidth: 1,
                        pointHoverRadius: 5,
                        pointHoverBackgroundColor: 'rgba(75,192,192,1)',
                        pointHoverBorderColor: 'rgba(220,220,220,1)',
                        pointHoverBorderWidth: 2,
                        pointRadius: 1,
                        pointHitRadius: 10,
                        data: priceArray
                      },
                    ]
               }}
              />

注意,对于硬编码的数据,我控制台记录了我的数组,并将它们复制粘贴到数据对象中。
顺便说一句,我知道价格和日期数组是向后的,不用担心,它都能工作。

pbwdgjma

pbwdgjma1#

把它改成字符串怎么样?
您可以通过Array.join()priceArray数组转换为字符串,如下所示:

data: priceArray.join(', ')

相关问题