Chart.js配置x轴,使空格不总是相等

时间:2017-07-25 01:54:10

标签: javascript ionic-framework charts chart.js

createLineChart() {

        this.lineChartEl = new Chart(this.lineCanvas.nativeElement, {
            type: 'line',
            data: {
                labels: [10, 11, 17, 18, 19, 23],
                datasets: [
                {
                    fill: true,
                    backgroundColor: '#C4CEE5',
                    label: 'recorded values',
                    borderColor: '#C4CEE5',
                    pointBorderColor: '#ffff',
                    pointBackgroundColor: '#ffff',
                    hoverBackgroundColor: '#C4CEE5',
                    pointRadius: 7,
                    borderCapStyle: 'square',
                    borderJoinStyle: 'round',
                    borderWidth: 1.5,
                    lineTension: 0,
                    data: [23, 34, 45, 12, 45, 65],
                    borderDash: [],
                    borderDashOffset: 0.0,
                    spanGaps: false,
                }]
            },
            options : {
                legend: {
                        display: false,
                        position: 'top',
                        fullWidth: true,
                    },
                scaleOverride: true,
                scaleSteps: 10,
                scaleStepWidth: 20,
                scaleStartValue: 0,
                scales: {
                    yAxes: [{
                        ticks: {
                            suggestMax: max,
                            maxTicksLimit: 4,
                            beginAtZero: true,
                            padding: 30
                        },
                    }],
                    xAxes: [{
                        ticks: {
                            min: 0,
                            maxTicksLimit: 5,
                            autoSkip: false,
                            beginAtZero: true,
                        },
                        time: {
                            unit: 'day',
                            unitStepSize: 1,
                            displayFormats: {
                                day: 'MMM D'
                            },
                        },

                        gridLines : {
                            display : false,
                            drawBorder: false,
                            color: 'transparent',
                        },
                    }]
                },
            },
         });
    };

我创建了一个chart.js折线图,其中x轴上的值是日期。我认为默认情况下,无论数据的值如何,chart.js都会绘制点之间距离相等的数据。 我希望如果日期更远,图表中有一个很大的空间。
我已经尝试使用chart-scatter插件来获取chart.js,但由于我使用离子/角度而没有太多运气,但如果你有任何经验,那就太棒了!


根据x轴值,我希望图表具有更多空间:

0 个答案:

没有答案