Question

我一直在尝试散布饼图，我必须覆盖页面上的大部分“卡片”，但是无论我削减多少利润，它要么开始消失在卡片内的另一个边框后面。我注意到amcharts lib创建了很多开发人员无法控制的层。无论如何，这就是我在说的：

这是生成的HTML代码段：

这是我的JavaScript：

 am4core.ready(function () {

            //Themes                
            var chartType = am4charts.PieChart3D;
            var seriesType = new am4charts.PieSeries3D();
        
            //Create Chart and Series 
            var chart = createChart(thisWidget.id, chartType);

            var pieSeries = chart.series.push(seriesType); // 3D Pie Chart

            //Set properties
            chart.hiddenState.properties.opacity = 0; // 3D Pie Chart: this creates initial fade-in
            
            pieSeries.slices.template.cornerRadius = 6;  //Pie Chart with varying Radius + 3D
            pieSeries.colors.step = 3;  //Pie Chart with varying Radius + 3D
            pieSeries.angle = 45;

            //color
            if (colorTheme) {
                pieSeries.colors.list = getAmchartCustomTheme(colorTheme);
            }
                
            //data types 
            pieSeries.dataFields.value = "count";
            pieSeries.dataFields.category = "tag";
            chart.paddingTop = 0;
            chart.marginTop = 0;
            
            // Put a thick white border around each Slice
            pieSeries.slices.template.stroke = am4core.color("#fff");
            pieSeries.slices.template
                // change the cursor on hover to make it apparent the object can be interacted with
                .cursorOverStyle = [
                    {
                        "property": "cursor",
                        "value": "pointer"
                    }
                ];

            //Make the slice move on hover
            var slice = pieSeries.slices.template;
            slice.states.getKey("active").properties.shiftRadius = 0;
            slice.states.getKey("hover").properties.scale = 1;
            slice.states.getKey("hover").properties.shiftRadius = 0.2;

            //increase size of Chart
            chart.svgContainer.htmlElement.style.height = targetHeight;
            chart.svgContainer.autoresize = true;

            //disable Ticks and labels to save space
            pieSeries.labels.template.disabled = true;

            //registering events
            pieSeries.slices.template.events.on("hit", function (ev) {
                var category = ev.target.slice._dataItem.properties.category;
                addInput(category);
            });
            pieSeries.alignLabels = false;       

            // Create a base filter effect (as if it's not there) for the hover to return to
            var shadow = pieSeries.slices.template.filters.push(new am4core.DropShadowFilter);
            shadow.opacity = 0;

            // Create hover state
            var hoverState = pieSeries.slices.template.states.getKey("hover"); // normally we have to create the hover state, in this case it already exists

            // Slightly shift the shadow and make it more prominent on hover
            var hoverShadow = hoverState.filters.push(new am4core.DropShadowFilter);
            hoverShadow.opacity = 0.7;
            hoverShadow.blur = 5;

            //Add Data
            chart.data = displayItems;
           
        })

Answer 1

strokeOpacity = 0 or strokeWidth = 0应该可以解决问题。

如何消除饼形图周围多余的空白？使用amcharts 4库

1 个答案: