gpt4 book ai didi

charts - 谷歌图表没有占用 100% 的空间

转载 作者:行者123 更新时间:2023-12-01 15:24:57 24 4
gpt4 key购买 nike

首先,对这个例子大喊一声:
https://www.c-sharpcorner.com/UploadFile/ca9151/google-charts-api-using-database-in-Asp-Net/
如果您想要一个简单的构建 Google 图表的演练,那么这是完美的。

在说......在那个例子中,在我的项目中......我无法让图表从指定部分的左侧开始。它不断缩进。当我隐藏轴标签时更糟糕的是,由于缺少文字,空间变得更大。

enter image description here

有谁知道如何让它们占据 100% 的宽度? (在图像中,我希望图表从红线开始,一直到 div 的另一侧)

提前致谢。

最佳答案

默认情况下,图表不会填充容器的宽度和高度。

使用 chartArea将图表拉伸(stretch)到容器边缘的选项,
使用 top , left , bottom , right为轴标签、标题等留出空间。

chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 48,
right: 16,
bottom: 48
},
height: '100%',
width: '100%',

在“调整大小”上重新绘制图表以使其响应,
请参阅以下工作片段...

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Average'],
['2019/01', 1, 2, 7, 3],
['2019/02', 5, 1, 3, 3.5],
['2019/03', 4, 3, 9, 6],
['2019/04', 1, 3, 8, 5],
['2019/05', 2, 6, 8, 4],
['2019/06', 3, 1, 9, 3],
]);

var options = {
chartArea: {
height: '100%',
width: '100%',
top: 48,
left: 48,
right: 16,
bottom: 48
},
height: '100%',
width: '100%',

title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {3: {type: 'area'}}
};

var chart = new google.visualization.ComboChart(document.getElementById('chart'));

drawChart();
window.addEventListener('resize', drawChart, false);
function drawChart() {
chart.draw(data, options);
}
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}

#chart {
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

关于charts - 谷歌图表没有占用 100% 的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56370157/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com