html - 如何在 item.html 中居中 vega-lite 图形?
问题描述
我正在努力将 vegalite 图形与网页的中心对齐,但我只能让它显示在左侧。
我还有另外两个图表,我可以将它们放在一起,但我对如何将第一个图表居中非常迷茫。
我正在寻找这样的东西:
Graph 1
Graph 2 Graph 3
这是我到目前为止所拥有的,目前显示如下:
Graph 1
Graph 2 Graph3
<table>
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div id="vis2" display="block"></div></td>
</tr>
</table>
<br><br>
<table>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div id="vis3"></div></td>
<td><div id="vis4"></div></td>
</tr>
</table>
解决方案
您可以简单地在表格中添加样式,width: 100%;
并在您的 div 块中添加样式,您可以style="display: block;"
在尝试显示 vega 图表的地方使用。同样在您的 vega 规范配置中,添加width: 'container'
将根据父容器保持宽度大小。
请参阅下面的片段或小提琴:
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A simple bar chart with embedded data.",
"data": {
"values": [{
"a": "A",
"b": 28
}, {
"a": "B",
"b": 55
}, {
"a": "C",
"b": 43
},
{
"a": "D",
"b": 91
}, {
"a": "E",
"b": 81
}, {
"a": "F",
"b": 53
},
{
"a": "G",
"b": 19
}, {
"a": "H",
"b": 87
}, {
"a": "I",
"b": 52
}
]
},
"autosize2": {"contains": "padding", "resize": true, "type": "fit"},
width: 'container',
"mark": "bar",
"encoding": {
"x": {
"field": "a",
"type": "ordinal"
},
"y": {
"field": "b",
"type": "quantitative"
}
}
}
vegaEmbed("#vis2", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis3", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
vegaEmbed("#vis4", yourVlSpec, {renderer: 'svg'}).then(res => {
var view = res.view;
//console.log(view.data('source_0'));
});
<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2/build/vega.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0/build/vega-lite.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.17.0/build/vega-embed.min.js"></script>
<table style="width: 100%;">
<thread>
<tr>
<th colspan="2">U.S. Gasoline Retail Prices</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis2"></div></td>
</tr>
</table>
<br><br>
<table style="width: 100%;">>
<thread>
<tr>
<th colspan="1">Average Annual Consumer Price Index(CPI) for Gasoline</th>
<th colspan="2">Annual Crude Oil Price by Barrel(42 gallons)</th>
</tr>
</thread>
<tr>
<td><div style="display: block;" id="vis3"></div></td>
<td><div style="display: block;" id="vis4"></div></td>
</tr>
</table>
推荐阅读
- c++ - 如果 `std::array` 没有采用 `std::initializer_list` 的构造函数,那么初始化如何工作?
- java - 对命名组使用 OR 运算符
- k2 - 从 base 64 转换为 K2 中的图像
- docker - 我可以使用/构建自定义创建的 docker 镜像来创建另一个镜像吗?
- c++ - 在没有管理员权限的情况下安装 C++ 编译器
- r - 多个 gganimate 并排绘制
- java - 无法将 groovy 文件添加到源文件夹
- javascript - 无法创建所需的 UI
- redis - Jackson2HashMapper 不使用 Flatten=True 序列化日期
- python - 我可以逃避这个错误 Traceback(最近一次通话最后一次):文件“
",第 1 行,在 文件 ” ",第 2 行,在 data_entry 中