Chart.js 傳遞動態標簽時不顯示數據

Question

我正在使用時間刻度並將時刻日期值傳遞給標簽。 時間尺度需要一個 integer（自紀元以來的毫秒數），一個日期 object，一個 moment.js object 的 label 值。

當我將該數組轉換為逗號分隔引號后將其傳遞給 charts.js“Labels”object 時，我有一個動態標簽數組，然后數據未顯示在圖表上。

        data: {
        labels: JSON.stringify(newDateArray),
        datasets: [{
            label: "My First dataset",
            data: [2, 3],
            backgroundColor: "rgba(255, 0, 0, 1)",
            fill: false,
        }]
    }

但是當我靜態傳遞上述數組的 output 時，圖形開始正常工作。

        data: {
        labels: ["2020-02-25T19:00:00.000Z","2020-02-27T19:00:00.000Z"],
        datasets: [{
            label: "My First dataset",
            data: [2, 3],
            backgroundColor: "rgba(255, 0, 0, 1)",
            fill: false,
        }]
    }

我嘗試了不同的方法將 JS 數組轉換為逗號分割字符串，然后傳遞動態標簽，即 (["'" + newDateArray.join("','") + "'"]) 但沒有任何效果。

這是包含完整 charts.js 代碼的jsfiddle 。 感謝你的幫助！

Answer 1

僅將數組傳遞給標簽而不是將數組轉換為逗號分割字符串解決了這個問題。

Answer 2

'<%-JSON.stringify(vCenterSpace)%>' 來自 node.js controller，我也花時間弄明白了。工作代碼示例供參考

                               <script>
                                   
                                    var vCenterSpaceData = ('<%-JSON.stringify(vCenterSpace)%>')
                                    var vCenterSpaceParsedData = JSON.parse(vCenterSpaceData)
                                    
                                    const formChartData = []
                                    const formChartLabels = []
    
                                    for(key in vCenterSpaceParsedData)
                                    {
                                        formChartData.push(vCenterSpaceParsedData[key]["Percentage"])
                                        formChartLabels.push(vCenterSpaceParsedData[key]["Date"])
                                    }
                                    //alert(formChartLabels)
                                    
                                    const zschart = new Chart(document.getElementById("chartjs-0"), {
                                        "type": "line",
                                        "data": {
                                            "labels": formChartLabels,
                                            "datasets": [{
                                                "label": "Usage in %",
                                                "data": formChartData,
                                                "fill": false,
                                                "borderColor": "rgb(75, 192, 192)",
                                                "lineTension": 0.1
                                            }]
                                        },
                                        "options": {}
                                    });
                                </script>