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

Question

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

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

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

这是我的代码:

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
            }
        ]
    });
});

谢谢:)

Answer 1

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

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

您还可以将 symbolSize 属性的值减小到例如 1。

这是 JsFiddle 的链接