Question

我正在尝试创建一个使用Chart.js框架的html页面。我无法将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和动量：

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

如果我不包含“ scales”对象，这就是图表的样子：

Answer 1

对我来说很好。

问题是您的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

Answer 2

为解决该问题，我不得不反转脚本标签的顺序：来自：

<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>

如果有人可以给我一个解释，我将非常感激。

当我尝试格式化日期时未显示Chart.js

2 个答案: