ChartJS不使用Moment.js显示时间数据

问题描述 投票:1回答:1

我正在尝试按小时绘制给定日期的一系列数据点。数据集中并没有包含每个小时,但是我仍然想显示从0:00-23:00的时间,并绘制可用的数据点。

我的错误是

此方法未实现:找不到适配器或提供了不完整的集成。

但是,看着documentation和这个tutorial,仍然出现错误。

在我的hourlyData集中,x是小时,y是金额。

谁能看到我在做什么错吗?

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>

 <script type="application/javascript">
    $(document).ready(function() {
        var ctx = document.getElementById('chart_hourlycalls').getContext('2d');
        var hourlyData =  [{"x":"1","y":"1"},{"x":"3","y":"2"},{"x":"5","y":"1"},{"x":"6","y":"13"},{"x":"7","y":"13"},{"x":"8","y":"5"},{"x":"9","y":"9"},{"x":"10","y":"14"},{"x":"11","y":"24"},{"x":"12","y":"5"}];

        var labels = hourlyData.map(e =>  moment(e.x, 'HH'));
        var data = hourlyData.map(e => e.y);

        var options = {
            scales: {
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Calls'
                    },
                    ticks: {
                        beginAtZero: true
                    }
                }],
                xAxes: [{
                    type: 'time',
                    time: {
                        unit: 'hour',
                        displayFormats: {
                            hour: 'HH a'
                        }
                    },
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Hour'
                    }
                }]
            },
            tooltips: {
                enabled: true
            },
        };

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: labels,
                data: data
            },
            options: options
        });


    });
  </script> 
javascript chart.js
1个回答
0
投票

[尝试使用time axis类型且尚未加载Moment.js时显示该错误。

Chart.js文档可能更清晰,但在installation page中有解释:

Chart.js提供了两种不同的版本供您选择:独立版本,捆绑版本。

独立构建(可能现在正在使用的内容):

包括Chart.js以及颜色解析库。 如果使用此版本,则要求在Chart.js之前包括Moment.js以提供时间轴的功能。

捆绑的版本(可能应该使用的东西):

将Moment.js包含在一个文件中。 [如果需要时间轴并要包含单个文件,则应使用此版本。如果应用程序已包含Moment.js,则不应使用此版本。

© www.soinside.com 2019 - 2024. All rights reserved.