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>