Chart.js在两个轴上都具有相同的轴刻度大小

时间:2018-12-17 20:58:57

标签: javascript chart.js

我正在使用chart.js创建一个图表,该图表表示一个棒球打击区,其中x和y轴具有特定的宽高比。我将极限分别设置为-2、2和-3、3,尽管图表正确地绘制了数据,但它始终显示为正方形。是否可以在两个轴上使用相同的物理尺寸刻度线,以便图表将显示为矩形?

图表代码段:

var myChart = $("#canvas5");
var chart5 = new Chart(myChart, {
        type: 'bubble',
        data: {
            datasets: datasets
        },
        options: {
            maintainAspectRatio: true,
            responsive: false,
            legend: {
                display: true,
                labels: {
                    filter: function(legendItem, data) {
                        return legendItem.text != undefined // catches line data with undefined labels
                    },
                    fontSize: 14
                },
                position: 'right'
            },
            layout: {
                padding: {
                    left: 200, // helps scale the axes
                    right: 150, // helps scale the axes
                    top: 0,
                    bottom: 0
                }
            },
            title: {
                display: true,
                text: 'Pitch Location Map',
                fontSize: 20
            },
            scales: {
                yAxes: [{
                    ticks: {
                        stepSize:1,
                        min:-3,
                        max:3
                    }
                }],
                xAxes: [{
                    ticks: {
                        stepSize:1,
                        min:-2,
                        max:2
                    }
                }]
            }
        }
    });

这是图表现在的外观。即使范围不同,也可以查看轴的物理尺寸如何相同。

Pitch location chart with improper scaling

0 个答案:

没有答案