如何在 item.html 中将 vega-lite 图表居中？

Question

我正在努力将 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>

Answer 1

您可以简单地在您的 table 中添加样式作为 width: 100%;，并且在您的 div 块中您可以在您尝试显示 vega 图表的地方使用 style="display: block;"。同样在你的 vega 规范配置中，添加 width: 'container' 这将保持父容器的宽度大小。

参考以下代码片段或fiddle：

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>

如何在 item.html 中将 vega-lite 图表居中？

How do I center a vega-lite graph in item.html?

html

formatting

vega-lite