Диаграмма. js синтаксический анализатор возвращает неправильную дату (неожиданно в 1990 г.) - PullRequest
Новая
       32

Диаграмма. js синтаксический анализатор возвращает неправильную дату (неожиданно в 1990 г.)

0 голосов
/ 23 апреля 2020

посмотрите мой код здесь. Я получаю данные из бэкэнда, поэтому больше не могу ими манипулировать. Я получил диаграмму. js, поскольку точечная диаграмма работает, но предоставленные даты анализируются неправильно. 2020 - 1996 и т. Д.

Есть идеи, как правильно отформатировать ось х? 

  var config = {
        type:    'scatter',
        data:    {
            datasets: [
                {
                    label: "US Dates",
                    data: [
                    {x:2020-01-23,y:25.55,date:[2020,1,23]},
                    {x:2020-01-24,y:21.53,date:[2020,1,24]},
                    {x:2020-01-25,y:21.11,date:[2020,1,25]}
                    ],
                    fill: false,
                    borderColor: 'red'
                }
            ]
        },
        options: {
            responsive: true,
            title:      {
                display: true,
                text:    "Chart.js Time Scale"
            },
            scales:     {
                xAxes: [{
                     time: {
                        parser: 'YYYY-MM-DD',
                        tooltipFormat: 'll',
                        unit: 'month',
                        unitStepSize: 1,
                       },
                    scaleLabel: {
                        display:     true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'value'
                    }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx       = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>

И, пожалуйста, игнорируйте значения даты в данных. Это только из бэкэнда.

Спасибо!

1 Ответ

1 голос
/ 23 апреля 2020

Вам просто нужно поместить кавычки вокруг значений x, а также установить тип оси x на 'time', что должно решить проблему!

Я обновил форматы отображения, чтобы показать более приятную ось x метки 

displayFormats: { 'day': 'DD-MMM'}

Я также разделил входные данные на собственную переменную, если это похоже на то, что исходит от вашего бэкэнда, все должно быть хорошо: 

const inputData = [
    {x:'2020-01-23',y:25.55,date:[2020,1,23]},
    {x:'2020-01-24',y:21.53,date:[2020,1,24]},
    {x:'2020-01-25',y:21.11,date:[2020,1,25]}
];

var config = {
        type:    'scatter',
        data:    {
            datasets: [
                {
                    label: "US Dates",
                    data: inputData,
                    fill: false,
                    borderColor: 'red'
                }
            ]
        },
        options: {
            responsive: true,
            title:      {
                display: true,
                text:    "Chart.js Time Scale"
            },
            scales:     {
                xAxes: [{
                     type: 'time',
                     time: {
                        parser: 'YYYY-MM-DD',
                        tooltipFormat: 'll',
                        unit: 'day',
                        unitStepSize: 1,
                        displayFormats: {
                            'day': 'DD-MMM',
                        }
                       },
                    scaleLabel: {
                        display:     true,
                        labelString: 'Date'
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display:     true,
                        labelString: 'value'
                    }
                }]
            }
        }
    };

    window.onload = function () {
        var ctx       = document.getElementById("canvas").getContext("2d");
        window.myLine = new Chart(ctx, config);
    };
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>
...