制作CanvasJS图表时出现“ Uncaught SyntaxError：无效的日期”错误

如何解决制作CanvasJS图表时出现“ Uncaught SyntaxError：无效的日期”错误

制作CanvasJS图表时遇到问题。 显示“未捕获的SyntaxError：无效日期”。

我正在从csv文件中获取数据。该文件中的数据如下所示：

2020-07-11T23：11：52,23.45

2020-07-14T21：06：39,25.02

2020-07-14T21：08：05,25.07

2020-07-14T21：10：00,25.13

2020-07-14T21：12：10,25.04

我也想做日期选择器，但图表不想显示。

getData()

    var dataPoints = [];
    var xlabels = [];

    var chart;
    chart = new CanvasJS.Chart("chartContainer",{
            title: {
                text: "Chart "
            },data: [
                {
                    type: "line",dataPoints: xlabels
                }
            ]
        });
    chart.render();

    var axisXMin = chart.axisX[0].get("minimum");
    var axisXMax = chart.axisX[0].get("maximum");


    async function getData(){

        var response =await fetch('data.csv');
        var data = await response.text();
        var table = data.split('\n').slice(1);
        table.forEach(row =>{
            var columns = row.split(',');
            var date = new Date(columns[0]);
            var xValue = date;
            var yValue = columns[1];

            xlabels.push(date);
            dataPoints.push({
                x: xValue,y: yValue
            });

        });


    }


    $( function() {
        $("#fromDate").val(CanvasJS.formatDate(axisXMin,"DD MMM YYYY"));
        $("#toDate").val(CanvasJS.formatDate(axisXMax,"DD MMM YYYY"));
        $("#fromDate").datepicker({dateFormat: "d M yy"});
        $("#toDate").datepicker({dateFormat: "d M yy"});
    });

    $("#date-selector").change( function() {
        var minValue = $( "#fromDate" ).val();
        var maxValue = $ ( "#toDate" ).val();

        if(new Date(minValue).getTime() < new Date(maxValue).getTime()){
            chart.axisX[0].set("minimum",new Date(minValue));
            chart.axisX[0].set("maximum",new Date(maxValue));
        }
    });

    $(".period").click( function() {
        var period = this.id;
        var minValue;
        minValue = new Date(axisXMax);

        switch(period){
            case "1m":
                minValue.setMonth(minValue.getMonth() - 1);
                break;
            case "3m":
                minValue.setMonth(minValue.getMonth() - 3);
                break;
            case "6m":
                minValue.setMonth(minValue.getMonth() - 6);
                break;
            case "1y":
                minValue.setYear(minValue.getFullYear() - 1);
                break;
            default:
                minValue = axisXMin;
        }

        chart.axisX[0].set("minimum",new Date(minValue));
        chart.axisX[0].set("maximum",new Date(axisXMax));
    });

 #update-nav {
            width: 100%;
            height: 30px;
        }
        #range-selector {
            width: 50%;
            float: left;
        }
        #date-selector {
            width: 50%;
            float: right;
        }

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<br/><!-- Just so that JSfiddle's Result label doesn't overlap the Chart -->

<div id="update-nav">
    <div id="range-selector">
        <input type="button" id="1m" class="period ui-button" value="1m" />
        <input type="button" id="3m" class="period ui-button" value="3m"/>
        <input type="button" id="6m" class="period ui-button" value="6m"/>
        <input type="button" id="1y" class="period ui-button" value="1y"/>
        <input type="button" id="all" class="period ui-button" value="All"/>
    </div>
    <div id="date-selector" class="">
        From:<input type="text" id="fromDate"  class="ui-widget">
        To:<input type="text" id="toDate"  class="ui-widget">
    </div>
</div>
<br/>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

解决方法

问题已解决：

将数据点更改为其他数据点并在数据点中使用它，然后使用parseFloat（）解析y值以使其浮动并在getData（）中呈现图表应该可以正常工作。

var dps = []; var xlabels = [];

var chart;
chart = new CanvasJS.Chart("chartContainer",{
    title: {
        text: "Chart with Date Selector"
    },data: [
        {
            type: "line",dataPoints: dps
        }
    ]
});


var axisXMin,axisXMax;


async function getData(){

    var response =await fetch('data.csv');
    var data = await response.text();
    var table = data.split('\n').slice(1);
    table.forEach(row =>{
        var columns = row.split(',');
        var date = new Date(columns[0]);
        var xValue = date;
        var yValue = parseFloat(columns[1]);
        console.log(columns[0]);
        xlabels.push(date);
        dps.push({
            x: xValue,y: yValue
        });