文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Vega/Vega lite创建响应式饼图？

问如何使用Vega/Vega lite创建响应式饼图？
EN

Stack Overflow用户

提问于 2021-09-30 10:45:48

回答 1查看 89关注 0票数 2

我想在Vega-Lite中创建一个饼图。我已经创建了一个，但我希望它的半径响应于显示网页的屏幕尺寸。

            vegaEmbed("#pie-chart", {
                $schema: "https://vega.github.io/schema/vega-lite/v5.json",
                autosize: {
                    type: "fit",
                    contains: "padding",
                },
                resize: true,
                layer: [
                    {mark: {type: "arc", innerRadius: 35, outerRadius: 80}},
                    {
                        mark: {type: "text", radius: 57.5, fill: "white"},
                        encoding: {
                            text: {field: "count", type: "nominal"},
                        },
                    },
                ],
                encoding: {
                    color: {
                        field: "name",
                        type: "nominal",
                    },
                    theta: {
                        field: "count",
                        type: "quantitative",
                        stack: true,
                    },
                },
                data: {
                    values: [
                        {
                            name: "a",
                            count: 21,
                        },
                        {
                            name: "b",
                            count: 6,
                        },
                        {
                            name: "c",
                            count: 3,
                        },
                        {
                            name: "d",
                            count: 3,
                        },
                        {
                            name: "e",
                            count: 2,
                        },
                        {
                            name: "f",
                            count: 1,
                        },
                        {
                            name: "g",
                            count: 2,
                        },
                        {
                            name: "h",
                            count: 1,
                        },
                    ],
                },
            });

<!DOCTYPE html>
<html>

<head>
  <title>Data visualizer</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>

<body>
  <span id="pie-chart"></span>
</body>
</html>

我曾考虑创建一个JavaScript函数，该函数基于屏幕宽度，根据具有可变半径的宽度动态地重新生成图形，但该解决方案似乎过于复杂且容易出错。有没有人对如何使饼图的大小具有响应性有什么建议？除此之外，正如您可能已经注意到的，图表的左侧被裁剪，可能是因为包含了一个图例。有没有人碰巧知道一种快速修复方法，可以在不手动设置图形容器大小的情况下修复此问题？

css

vega-lite

vega

javascript

html

回答 1

Stack Overflow用户

发布于 2021-09-30 16:42:21

看起来您在autosize规范之外设置了resize: true。也许你是故意这样做的？

     autosize: {
                    type: "fit",
                    contains: "padding",
                    resize: true,
                },

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/69390831

复制

相似问题

问如何使用Vega/Vega lite创建响应式饼图？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Vega/Vega lite创建响应式饼图？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Vega/Vega lite创建响应式饼图？
EN