我试着用图表。js创建缩略图,链接到包含完整图表的页面。
链接页面上的完整图表看起来不错,但对于缩略图,我就是无法正确调整大小。画布覆盖了正确的区域,但图形没有垂直填充。
var data = {
labels: ['','','','','','','','','',''],
datasets: [{
data:[22,25,23,24,25,22,25,23,24,25],
backgroundColor: "rgba(54, 255, 170, 0.4)",
borderColor: "rgba(54, 255, 170, 1)",
orderWidth: 1,
}]
};
var options = {
tooltips: false,
legend: {
display:false
},
scales: {
yAxes: [{
display:false,
ticks: {
beginAtZero:true
}
}],
xAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)",
}
}]
}
};
new Chart($("#chart-"+this.model.id), {
type: 'bar',
data: data,
options: options
});
我尝试过调整画布的最小高度,但这会导致条带模糊。有什么方法可以调整横条的高度以占据整个画布吗?
使用MaintaintAspectRatio
和responsive
options: {
responsive: true,
maintainAspectRatio: false,
}
let chart = new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true
}
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.2/dist/chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
实际上在图表中。js 3.2。1要更新纵横比以增加方案的高度,可以使用aspectRatio
选项:
options: {
aspectRatio: 1,
}
所以根据留档:
画布纵横比(即宽度/高度,值1表示正方形画布)。请注意,如果高度明确定义为属性或通过样式,则忽略此选项。
您可以将其设置为:
1
使其成为方形我希望一个图像填充其容器宽度的100%,并且我希望它设置最大高度属性,所有这些都保持纵横比,但允许丢失图像的任何部分。 我知道可以用背景大小属性做类似的事情,但我想把它变成内联的 你知道我如何使用CSS实现这一点吗?还是javascript?
我正在处理图像,我遇到了一个关于纵横比的问题。 可以看到,和已经指定。我为图像添加了CSS规则: 但是对于,我接收到和。如何设置图像的大小,同时保持他们的纵横比。
使用CSS flex box模型,如何强制图像保持其纵横比? JS小提琴:http://jsfiddle.net/xLc2Le0k/2/ 请注意,为了填充容器的宽度,图像会拉伸或收缩。这很好,但是我们也能让它拉伸或收缩高度来保持图像比例吗? HTML CSS
我在响应式站点上设置了flexSlider。我正在创建的滑块可以拍摄横向和纵向图像。我设置了,以便调整高度以适应图像。 在最大的媒体查询中,flexslider容器的宽度为750px。这对于横向图像很好,但纵向图像太大了。肖像图像的宽度设置为与容器相同的大小-750px宽,因此高度至少是容器宽度的两倍,因此如果不滚动,则无法查看整个图像。 在css中,我尝试设置最大高度:750px,这解决了高度问
问题内容: 我正在尝试从 遍及海底500m x 40m的声纳数据绘制海底3D图像。我将Matplotlib / mplot3d与 Axes3D配合使用,并且希望能够更改轴的纵横比,以便 按比例缩放x和y轴。具有生成的数据而非 实际数据的示例脚本是: 以及此脚本的输出图像: matplotlib输出图像 现在,我想对其进行更改,以使沿轨迹(x)轴 的1米与范围(y)轴的1米相同(或 取决于所涉及的相
问题内容: 设置纵横比适用于2d图: 但不适用于3d: 3d情况是否有其他语法,或者未实现? 问题答案: 我的理解基本上是尚未实现(请参阅GitHub中的此错误)。我也希望能尽快实施。请参阅此链接以获取可能的解决方案(我自己尚未对其进行测试)。