如何设置和调整具有相等轴纵横比的图 - CHART.js

【问题标题】：How to set and adjust plots with equal axis aspect ratios - CHART.js如何设置和调整具有相等轴纵横比的图 - CHART.js
【发布时间】：2022-01-15 10:04:04
【问题描述】：

我有一个展示机器人运动的项目，我想制作这张地图，使 x 和 y 比例相互成比例。这些数据是实时数据，正如我所提到的，它显示了机器人的运动。谁能帮我解决这个问题？

这是图：

myChart = new Chart(ctx, {

type: 'scatter',

data: {

    datasets: [{

        label: '',

        backgroundColor: "blue",
        
        fill: false,

        data: [],

    }]

},

options: {

    scales: {

        xAxes: [{

            ticks:{

                suggestedMax:15,

            }

        }]

        yAxes: [{

            ticks:{

                suggestedMax:15,

            }

        }]

    }

}

});

【问题讨论】：

标签： javascript chart.js axis aspect-ratio aspect

【解决方案1】：

您可以通过width 或height 属性定义canvas 所需的维度。

<canvas id="chartContainer" width="400"></canvas>

...或使用CSS。

canvas {
  width: 400px;
}

此外，您还应该在图表options 中定义responsive: false 和aspectRatio: 1，后者代表一个方形画布。

options: {
  responsive: false,
  aspectRatio: 1,

请参阅 Chart.js 文档中的 Configuration Options

【讨论】：