如何在 chartjs 中向树形图添加更多填充？答案

【问题标题】：How can I add more padding to tree chart in echartjs?如何在 chartjs 中向树形图添加更多填充？
【发布时间】：2019-07-20 00:42:24
【问题描述】：

对于某些工具，我们使用来自 echartjs 的树形图。

一切正常，但我有一个问题，它是树形图中填充的大小。

正如您在这张图片中看到的，一切都很好，但我无法为此图表启用更多填充：我想要这张图表用于我的朋友网站 (امروز چندمه)

这是我的代码：

myChart.showLoading();
$.get('data/asset/data/flare.json', function (data) {
    myChart.hideLoading();

    echarts.util.each(data.children, function (datum, index) {
        index % 2 === 0 && (datum.collapsed = true);
    });

    myChart.setOption(option = {

        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },

        series:[
            {
                type: 'tree',

                data: [data],

                top: '1%',
                left: '15%',
                bottom: '1%',
                right: '7%',

                symbolSize: 7,

                orient: 'RL',

                label: {
                        position: 'right',
                        verticalAlign: 'middle',
                        align: 'left'
                },

                leaves: {
                    label: {
                            position: 'left',
                            verticalAlign: 'middle',
                            align: 'right'
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
    });
});

谢谢:)

【问题讨论】：

你能检查对应的css元素并覆盖css属性有填充

标签： javascript charts visualization

【解决方案1】：

您需要将top 和bottom 属性的值更改为负值，并将left 和right 属性的值更改为更大的正值。

例如，设置top : -10% 和bottom: -15%。然后Right: 20% 和left:15%。您将不得不尝试不同的值，直到找到适合您的情况的组合。右值和左值越高，顶部和底部值越低，效果越明显。也就是说，使您的图表更高更窄，从而间隔或填充值。

您还可以将 symbolSize 属性的值减小为 1。

这是JsFiddle的链接

【讨论】：

我尝试了，但我不能这样做，你能解释一下你在 jsfiddle 中的代码吗？
@majid 我已经在我的答案中添加了指向小提琴的链接。在小提琴中，查找评论“更改这些值以查看效果”

【解决方案2】：

Echart version 4 从节点中删除了填充选项。我也试图解决这个问题，但 echart github 存在问题。您可以使用其他功能，例如 mouseOver。

【讨论】：

【解决方案3】：

似乎在 Echart version 4 中没有办法为节点定义填充但是有一种方法可以避免节点崩溃。

这棵树将占用您允许的尽可能多的空间（宽度和高度）。所以你可以为外部div 指定更大的高度值。然后overflow: auto;下一个div。

<div style="overflow:auto">
 <div style="min-height:2000px">
  <EchartsSVG/>
 </div>
</div>

您可以创建一个公式来计算您的节点并计算min-height

【讨论】：