使Chart.js图表​​拉伸到100%宽度而不填充内部

时间:2017-03-27 17:07:29

标签: javascript chart.js chart.js2

是否可以使Chart.js图像使用包含div的页面的整个宽度?

enter image description here

canvas元素放置在一个包含div中,该div延伸100%的视口。是否有一个选项可以删除Chart.js添加的内部填充?

我尝试用负数抵消标签,但没有成功。

放置图表的画布:

<canvas id="save-simulator" class="graph"></canvas>

我的代码:

        const ChartObj = new Chart(element, {
        type: 'line',
        data: chartData,
        options: {
            responsive: true,
            maintainAspectRatio: false,
            onClick: this.handleClick.bind(this, chartData),
            legend: {
                display: false
            },
            scales: {
                yAxes: [{
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: false
                    },
                    ticks: {
                        display: false
                    }
                }],
                xAxes: [{
                    gridLines: {
                        color: 'rgba(255, 255, 255, 0)',
                        zeroLineColor: 'rgba(255, 255, 255, 0)', // hide the zero line by making it white
                        zeroLineWidth: 0,
                    },
                    scaleLabel: {
                        display: false
                    },
                    ticks: {
                        // Only display time line with a 5 year span
                        callback: function(dataLabel, index) {
                            return (index+1) % 5 === 0 ? dataLabel : '';
                        },
                    }
                }],
            },
            tooltips: {
                mode: 'index',
                intersect: false,
                position: 'nearest',
                callbacks: {
                    label: function(tooltipItem, data) {
                        if (data.datasets[tooltipItem.datasetIndex].label.length) {
                            return data.datasets[tooltipItem.datasetIndex].label + ': ' + currencyFormatter.format(tooltipItem.yLabel, { code: 'SEK', thousand: ' ', precision: 0 });
                        }
                    },
                    title: function(tooltipItem, data) {
                        return data.labels[tooltipItem[0]['index']] + ' år';
                    }
                },
            }
        },
    });

0 个答案:

没有答案