时间戳

首页 > 解决方案 > 从顶点圆环图Angular中删除白线

javascript - 从顶点圆环图Angular中删除白线

问题描述

我想从使用以下配置制作的顶点图表中隐藏这条白线。我已经尝试了很多使用属性来删除它，但它仍然保持原样。如何删除两个不同数据之间的那些白线。

在屏幕截图中，它用红色箭头标记。我想删除的那些白线。

白线

HTML

<apx-chart class=""
[chart]="newVsReturningOptions.chart"
[colors]="newVsReturningOptions.colors"
[labels]="newVsReturningOptions.labels"
[plotOptions]="newVsReturningOptions.plotOptions"
[series]="newVsReturningOptions.series"
[states]="newVsReturningOptions.states"
[tooltip]="newVsReturningOptions.tooltip"></apx-chart>

我的配置

this.newVsReturningOptions = {
    chart      : {
        animations: {
            speed           : 0,
            animateGradually: {
                enabled: false
            }
        },
        fontFamily: 'inherit',
        foreColor : 'inherit',
        height    : '56px',
        width     : '70px',
        type      : 'donut',
        sparkline : {
            enabled: true
        }
    },

    colors     : ['#0694A2', '#E2E2E2'],
    labels     : this.data.labels,
    plotOptions: {
        pie: {
            expandOnClick: false,
            donut        : {
                size: '80%'
            }
        }
    },
    series     : this.data.series,
    states     : {
        hover : {
            filter: {
                type: 'none'
            }
        },
        active: {
            filter: {
                type: 'none'
            }
        }
    },
    grid: {
      padding: {
       left: 0,
       right: 0
      }
    },
    stroke: {
      width: 0,
      
    },
    tooltip    : {
        enabled        : true,
        fillSeriesColor: false,
        theme          : 'dark',
        custom         : ({seriesIndex, w}) => {
            return `<div class="flex items-center h-8 min-h-8 max-h-8 px-3">
                        <div class="w-3 h-3 rounded-full" style="background-color: ${w.config.colors[seriesIndex]};"></div>
                        <div class="ml-2 text-md leading-none">${w.config.labels[seriesIndex]}:</div>
                        <div class="ml-2 text-md font-bold leading-none">${w.config.series[seriesIndex]}%</div>
                    </div>`;
        }
    }
};


}

标签： javascriptangularapexcharts

解决方案

我想你忘记通过了。组件中的 [stroke] 输入<apx-start></apx-start>。

尝试通过它，它应该为您解决问题。

<apx-chart [chart]="newVsReturningOptions.chart"
           [colors]="newVsReturningOptions.colors"
           [labels]="newVsReturningOptions.labels"
           [plotOptions]="newVsReturningOptions.plotOptions"
           [series]="newVsReturningOptions.series"
           [states]="newVsReturningOptions.states"
           [tooltip]="newVsReturningOptions.tooltip"
           [stroke]="newVsReturningOptions.stroke">
</apx-chart>

推荐阅读