在Apexchart样式表中,需要添加“apexcharts-menu”类和相关样式。
例如:
.apexcharts-menu {
position: absolute;
z-index: 1;
cursor: pointer;
width: 20px;
height: 20px;
background-color: rgba(0,0,0,.1);
border-radius: 2px;
padding: 4px;
right: 0px;
top: 10px;
}
.apexcharts-menu svg {
fill: #6e8192;
}
.apexcharts-menu:hover {
background-color: rgba(0,0,0,.2);
}
然后,在Blazor组件中,需要使用以下代码来启用工具栏:
public class ChartBase : ComponentBase
{
protected ApexCharts ApexChartsRef;
protected ChartOptions ChartOptions;
protected override void OnAfterRender(bool firstRender)
{
if (firstRender)
{
ApexChartsRef.SetChartOptions(ChartOptions);
ApexChartsRef.Bind(ChartOptions.Series, ChartOptions.ChartType);
}
else
{
ApexChartsRef.UpdateSeries(ChartOptions.Series);
}
}
protected void ToggleToolbar()
{
if (ChartOptions.Toolbar.Show)
{
ChartOptions.Toolbar.Show = false;
ApexChartsRef.UpdateOptionsObject(ChartOptions);
}
else
{
ChartOptions.Toolbar.Show = true;
ApexChartsRef.UpdateOptionsObject(ChartOptions);
}
}
}
最后,在页面中,可以使用以下代码来创建工具栏按钮:
这样就可以在Blazor包装器中成功显示Apexchart的工具栏了。