如何基于数据使用chart.js绘制自动x轴?

时间:2019-05-12 20:22:12

标签: chart.js

我正在从MySQL中检索要与chartjs一起显示的统计数据。

数据集的数量将有所不同,并且每天都有数据点。有些项目只有14天,而另一些则只有几个月。因此,我正在寻找一种显示适当数据规模的方法。

现在,我的代码仅使用Jan-Dec,但是在我的示例中,我获得了30个数据集(天)。

如何自动显示适当的时间轴?

var stats.price_min = ["5490", "5490", "5490", "6030", "6030", "6030", "6120", "6120", "6120", "6030", "6030", "6030", "5470", "5470", "5470", "5739", "5739", "5739", "7290", "7290", "7290", "5915", "5915", "5915", "6030", "6030", "6030", "7369", "7369", "7369"];
console.log(stats.price_min);

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels:["January","February","March","April","May","June","July", "August", "September", "October", "November", "December"],
        datasets: [
            {
                label: 'Price min',
                data: stats.price_min,
                backgroundColor: [
                    'rgba(0, 106, 255, 1)',
                ],
                borderColor: [
                      'rgba(0, 106, 255, 1)',

                ],
                fill:false,
                lineTension: 0.1,
                borderWidth: 1
            },
        ]                          
    },
    options: {
        scales: {
            xAxes: [{
                gridLines: {
                    drawOnChartArea: false
                }
            }],
            yAxes: [{
                position: 'right',
                ticks: {
                    beginAtZero: false
                }
            }]
        }
    }
});

enter image description here

0 个答案:

没有答案