Chart.js не отображается, когда я пытаюсь отформатировать даты - PullRequest
Новая
       18

Chart.js не отображается, когда я пытаюсь отформатировать даты

0 голосов
/ 30 октября 2018

Я пытаюсь создать html-страницу, которая использует фреймворк Chart.js. Я не могу получить ось X для форматирования в качестве даты (любой даты). Если я не включу в параметры объект scales, график будет показан ниже. Однако, когда я включаю объект scales, диаграмма вообще не отображается. Ты хоть представляешь, что я могу делать не так? 

<div class="container" style="min-width: 500px; width: 50%;">
    <canvas id="PnLChart"></canvas>
</div>
<script>
    var ctx = document.getElementById("PnLChart").getContext('2d');
    var timeFormat = 'MM/DD/YYYY HH:mm';
    var json = '[   {"ReportDate":"2018-01-31T00:00:00.000Z","YtD":14609547.9130000044},
                    {"ReportDate":"2018-02-09T00:00:00.000Z","YtD":-7823612.5760000022},
                    {"ReportDate":"2018-02-12T00:00:00.000Z","YtD":-8326611.3190000039},
                    {"ReportDate":"2018-02-13T00:00:00.000Z","YtD":-9144531.6940000001},
                    {"ReportDate":"2018-02-14T00:00:00.000Z","YtD":-8122732.6769999973}]';
    var json_obj = JSON.parse(json);
    var itemCount = json_obj.length;
    var dateLabels = [];
    var pnlData = [];
    for (var i = 0; i < itemCount; i++){
        var d = moment(json_obj[i].ReportDate);
        dateLabels.push(d);
        pnlData.push(json_obj[i].YtD);
    }
    var config = {
        type: 'line',
        data: {
            labels:  dateLabels,
            datasets:[
                {
                    label: 'YtD',
                    data: pnlData
                }
            ]
        },
        options:{
            title: {
                display: true,
                text: 'Year to Date PnL'
            },
            legend: {
                display: false,
                position: 'right'
            },
            scales: {
                xAxes: [
                    {
                        type: 'time',
                        time: {
                            displayFormats: {
                                day: 'MMM D'
                            }
                        }
                    }
                ]
            }
        }
    };
    var myChart = new Chart(ctx, config)
</script>

в заголовке моей страницы я включаю chart.js и momentum.js, как показано ниже: 

<script src="/static/ChartJS/2.7.2/Chart.min.js"></script>
<script src="/static/moment/2.22.2/moment.js"></script>

Вот так выглядит график, если я не включаю объект «весы»: enter image description here

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

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

<script src="/static/ChartJS/2.7.2/Chart.min.js"></script>
<script src="/static/moment/2.22.2/moment.js"></script>

до 

<script src="/static/moment/2.22.2/moment.js"></script>
<script src="/static/ChartJS/2.7.2/Chart.min.js"></script>

если бы кто-нибудь смог дать мне объяснение, я был бы очень благодарен.

0 голосов
/ 31 октября 2018

У меня отлично работает.

Проблема в том, что ваша json переменная разбита на несколько строк. Соедините их в одну строку или измените на многострочную строку с обратными галочками.

Здесь работает ваш собственный код: https://jsfiddle.net/efq6wnhm/1/

Эта скрипка использует Chart.js 2.7.3, связанный здесь: https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js

...