Question

我试图在chartjs时间刻度中显示用法，并带有日期范围。但有些时候，数据非常广泛（350+）。在这种情况下，y轴网格线的起点不与x轴的第一个刻度对齐。我已经寻找解决方案，但人们说他们已经解决了这个问题。为什么这仍然与我同在？我使用的是最新的chartjs版本（2.6），代码类似于以下内容。

var config= {
        type: 'line',
        data: {
            datasets: [{
                label: 'CPU',
                fill: true,
                pointHitRadius: 25,
                backgroundColor: "rgba(75,192,192,1)",
                borderColor: 'rgba(75,192,192,1)',
                pointBorderColor: 'rgba(75,192,192,1)',
                pointBackgroundColor: '#fff',
                borderWidth: 1
            }]
        },
        options: {
            scaleBeginAtZero: false,
            title: {
                display: true,
                text: 'Uso de CPU'
            },
            hover: {animationDuration: 100},
            layout:{
                padding: {left: 50, right: 50, top: 50, bottom: 50 }
            },
            legend:{display: false },
            animation: {duration: 500 },
            scales: {
                xAxes: [{
                    type: 'time',
                    ticks: {
                        maxRotation: 0,
                        autoSkip: true,
                        maxTicksLimit: 12,
                        bounds: "data",
                    },
                    time: {
                        round: 'minutes',
                        displayFormats: {
                            'millisecond': 'HH:mm',
                            'second': 'HH:mm',
                            'minute': 'HH:mm',
                            'hour': 'HH:mm',
                            'day': 'DD [de] MMM [de] YY',
                            'week': 'DD [de] MMM [de] YY',
                            'month': 'DD [de] MMM [de] YY',
                            'quarter': 'DD [de] MMM [de] YY',
                            'year': 'DD [de] MMM [de] YY',
                        },
                        tooltipFormat: 'D MMM YYYY H:mm'
                    }
                }],
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        stepSize: 25,
                        suggestedMin: 0,
                        suggestedMax: 100,
                        callback: function(value, index, values) {
                            return value+"% ";
                        }
                    }
                }]
            }
        }
    };
    var rows = {"rows":[{"x":"2017-08-25T10:16:54-03:00","y":21}]}; //continues 350+
    var canvas = $('<canvas>', {id: element});
    var ctx = canvas[0].getContext('2d');
    window.myChart = new Chart(ctx, config);
    window.myChart.data.datasets[0].data = rows;
    window.myChart.update();

任何帮助都会被预先准备好。

Answer 1

我研究过，没有找到答案。我回到jsfiddle并检查了所有可用选项。我用以下选项解决了这个问题：scales.xAxes.source: 'auto'（可以是线性的），scales.bounds: 'ticks'和Pvector(Pvector&)

Chartjs：在轴的第一个索引中对齐第一个刻度

1 个答案: