0

看看我的代码在这里。我从后端获取数据，所以我无法进一步操作它们。我让 Chart.js 作为散点图工作，但提供的日期被解析错误 2020 变成 1996 等等。

知道如何正确格式化 x 轴吗？

  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>

请忽略数据中的“日期”值。这只是来自后端。

谢谢！

4

1 回答 1

1

您只需在 x 值周围加上引号，并将 x 轴类型设置为“时间”，即可解决问题！

我更新了显示格式以显示更好的 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>

于 2020-04-23T08:36:49.147 回答