从顶点甜甜圈图中删除白线 Angular
Remove white line from apex donut chart 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>`;
}
}
};
}
我想你是忘记通过了。 <apx-start></apx-start>
组件中的 [stroke] 输入。
尝试通过它,它应该可以为您解决问题。
<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>
我想从我使用以下配置制作的顶点图表中隐藏这条白线。我已经尝试了很多方法来使用属性来删除它,但它仍然保持原样。如何删除两个不同数据之间的白线。
在屏幕截图中用红色箭头标记。我想删除的那些白线。
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>`;
}
}
};
}
我想你是忘记通过了。 <apx-start></apx-start>
组件中的 [stroke] 输入。
尝试通过它,它应该可以为您解决问题。
<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>