Блог

Главная - Вопросы по программированию - Ошибка «Uncaught SyntaxError: недопустимая дата» при создании диаграммы CanvasJS

Ошибка «Uncaught SyntaxError: недопустимая дата» при создании диаграммы CanvasJS

#javascript #charts #fetch #canvasjs

#javascript #Диаграммы #выборка #canvasjs

Вопрос:

У меня возникла проблема при создании диаграммы CanvasJS. Отображается «Uncaught 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

Я также хочу создать datepicker, но диаграмма не хочет отображаться.

 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>

Ответ №1:

Проблема решена:

Измените точки данных на что-то другое и используйте это в datapoint, а также преобразуйте значение y в значение float с помощью parseFloat() и визуализация диаграммы внутри 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
        });