Chart.js - 时间线

我正在尝试使用 Chart.js 在 xAxes 上显示日期


我尝试了 2 个日期,但没有显示任何内容。 可能是我在标签或日期格式上做错了。


<canvas id="graph"></canvas>


<script>

    var ctx = document.getElementById('graph').getContext('2d');

    var myChart = new Chart(ctx, {

        type: 'line',

        data: {

            labels: ["2013-02-08", "2013-02-10"],

            datasets: [{

                label: "Something",

                data: [{

                    x: "2013-02-08",

                    y: 1

                }, {

                    x: "2013-02-10",

                    y: 10

                }]

            }]

        },

        options: {

            scales: {

                xAxes: [{

                    type: 'time',

                    time: {

                        unit: 'day'

                    }

                }]

            }

        }

    });

</script>

需要帮忙 :)


慕桂英3389331
浏览 48回答 0
0回答

守候你守候我

您的代码看起来不错,只是您不需要定义 data.labels 因为数据集中的 data 被定义为 通过包含 和 属性的对象。单个点xyChart.js 在内部使用Moment.js 来实现时间轴的功能,其中在单个文件中包含 Moment.js。捆绑版本。因此,您应该使用 Chart.js 的var ctx = document.getElementById('graph').getContext('2d');var myChart = new Chart(ctx, {  type: 'line',  data: {    datasets: [{      label: "Something",      data: [        { x: "2013-02-08", y: 1 },         { x: "2013-02-10", y: 10 }      ]    }]  },  options: {    scales: {      xAxes: [{        type: 'time',        time: {          unit: 'day'        }      }]    }  }});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script><canvas id="graph"></canvas>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5