Question

我正在使用chart.js库。我正在创建一个图表，并希望在x轴上显示日期，如下所示：http://www.chartjs.org/samples/latest/scales/time/line.html

我提供了相同的配置（图形数据的日期格式除外），如上例所示，但我的图表显示时间，即上午2点，凌晨2点，而不是日期，即2018-02-01,2018 -02-10，......

对于日期格式化，我使用Chart.js推荐的moment.js库

我正在使用以下代码：

＆＃13;

<!doctype html>
<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>

</head>

<body>
<div style="width:75%;">
    <canvas id="canvas"></canvas>
</div>

<script>

    var timeFormat = 'YYYY-MM-DD';

    var config = {
        type: 'line',
        data: {
            datasets: [{
                label: "Thi is graph label",
                backgroundColor: "rgb(54, 162, 235)",
                borderColor: "rgb(255, 159, 64)",
                fill: false,
                data: [{
                    x: moment("2010-03-01").format(timeFormat),
                    y: 0.668525
                }, {
                    x: moment("2010-03-02").format(timeFormat),
                    y: 0.668827
                }],
            }]
        },
        options: {
            title: {
                text: "This is title"
            },
            scales: {
                xAxes: [{
                    type: "time",
                    time: {
                        parser: timeFormat,
                        tooltipFormat: 'll HH:mm'
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Date'
                    }
                },],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
        }
    };

    window.onload = function () {
        var ctx = document.getElementById("canvas").getContext("2d");
        console.log(config);
        window.myLine = new Chart(ctx, config);

    };
</script>
</body>

</html>

＆＃13;

Answer 1

<html>

<head>
    <title>Line Chart</title>
    <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.bundle.js"></script>
        <style>
        canvas {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
        }
    </style>
</head>

<body>
    <div style="width:75%;">
        <canvas id="canvas"></canvas>
    </div>
    <br>
    <br>
    <button id="randomizeData">Randomize Data</button>
    <button id="addDataset">Add Dataset</button>
    <button id="removeDataset">Remove Dataset</button>
    <button id="addData">Add Data</button>
    <button id="removeData">Remove Data</button>
    <script>
        var timeFormat = 'MM/DD/YYYY HH:mm';

        function newDate(days) {
            return moment().add(days, 'd').toDate();
        }

        function newDateString(days) {
            return moment().add(days, 'd').format(timeFormat);
        }

        var color = Chart.helpers.color;
        var config = {
            type: 'line',
            data: {
                labels: [ // Date Objects
                    newDate(0),
                    newDate(1),
                    newDate(2),
                    newDate(3),
                    newDate(4),
                    newDate(5),
                    newDate(6)
                ],
                datasets: [{
                    label: 'My First dataset',
                    backgroundColor: color(window.chartColors.red).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.red,
                    fill: false,
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor()
                    ],
                }, {
                    label: 'My Second dataset',
                    backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.blue,
                    fill: false,
                    data: [
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor(),
                        randomScalingFactor()
                    ],
                }, {
                    label: 'Dataset with point data',
                    backgroundColor: color(window.chartColors.green).alpha(0.5).rgbString(),
                    borderColor: window.chartColors.green,
                    fill: false,
                    data: [{
                        x: newDateString(0),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(5),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(7),
                        y: randomScalingFactor()
                    }, {
                        x: newDateString(15),
                        y: randomScalingFactor()
                    }],
                }]
            },
            options: {
                title: {
                    text: 'Chart.js Time Scale'
                },
                scales: {
                    xAxes: [{
                        type: 'time',
                        time: {
                            format: timeFormat,
                            // round: 'day'
                            tooltipFormat: 'll HH:mm'
                        },
                        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);

        };

        document.getElementById('randomizeData').addEventListener('click', function() {
            config.data.datasets.forEach(function(dataset) {
                dataset.data.forEach(function(dataObj, j) {
                    if (typeof dataObj === 'object') {
                        dataObj.y = randomScalingFactor();
                    } else {
                        dataset.data[j] = randomScalingFactor();
                    }
                });
            });

            window.myLine.update();
        });

        var colorNames = Object.keys(window.chartColors);
        document.getElementById('addDataset').addEventListener('click', function() {
            var colorName = colorNames[config.data.datasets.length % colorNames.length];
            var newColor = window.chartColors[colorName];
            var newDataset = {
                label: 'Dataset ' + config.data.datasets.length,
                borderColor: newColor,
                backgroundColor: color(newColor).alpha(0.5).rgbString(),
                data: [],
            };

            for (var index = 0; index < config.data.labels.length; ++index) {
                newDataset.data.push(randomScalingFactor());
            }

            config.data.datasets.push(newDataset);
            window.myLine.update();
        });

        document.getElementById('addData').addEventListener('click', function() {
            if (config.data.datasets.length > 0) {
                config.data.labels.push(newDate(config.data.labels.length));

                for (var index = 0; index < config.data.datasets.length; ++index) {
                    if (typeof config.data.datasets[index].data[0] === 'object') {
                        config.data.datasets[index].data.push({
                            x: newDate(config.data.datasets[index].data.length),
                            y: randomScalingFactor(),
                        });
                    } else {
                        config.data.datasets[index].data.push(randomScalingFactor());
                    }
                }

                window.myLine.update();
            }
        });

        document.getElementById('removeDataset').addEventListener('click', function() {
            config.data.datasets.splice(0, 1);
            window.myLine.update();
        });

        document.getElementById('removeData').addEventListener('click', function() {
            config.data.labels.splice(-1, 1); // remove the label first

            config.data.datasets.forEach(function(dataset) {
                dataset.data.pop();
            });

            window.myLine.update();
        });
    </script>
</body>

</html>

Answer 2

您需要设置：

scales: {
   xAxes: [
     {
     .....
        ticks: {
          source: 'date'
        },
     }
     ......
],

使用chart.js时，在x轴上显示日期

2 个答案: