mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-11-30 11:08:14 +08:00
feat: add more demo on area chart (#488)
Co-authored-by: James Yeung <shunjiey@hotmail.com>
This commit is contained in:
Henry.zhang
GitHub
parent
4e0a3028bb
commit
2a60383a93
@ -3,11 +3,17 @@
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject HttpClient HttpClient
|
||||
|
||||
<Tabs>
|
||||
<Tabs ActiveKeyChanged="OnTabChanged">
|
||||
<TabPane Key="1">
|
||||
<Tab>示例1</Tab>
|
||||
<ChildContent>
|
||||
<Area @ref="chart1" TItem="FireworksSalesItem" Config="config1"/>
|
||||
<Area @ref="chart1" TItem="FireworksSalesItem" Config="config1" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="2">
|
||||
<Tab>示例2</Tab>
|
||||
<ChildContent>
|
||||
<Area @ref="chart2" TItem="SalesItem" Config="config2" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
@ -15,13 +21,27 @@
|
||||
@code{
|
||||
|
||||
IChartComponent chart1;
|
||||
IChartComponent chart2;
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
|
||||
chart1.ChangeData(data1);
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
OnTabChanged("1");
|
||||
}
|
||||
|
||||
|
||||
private async void OnTabChanged(string activeKey)
|
||||
{
|
||||
if (activeKey == "1")
|
||||
{
|
||||
var data1 = await ChartsDemoData.FireworksSalesAsync(NavigationManager, HttpClient);
|
||||
chart1.ChangeData(data1);
|
||||
}
|
||||
else
|
||||
{
|
||||
var data2 = await ChartsDemoData.SalesAsync(NavigationManager, HttpClient);
|
||||
chart2.ChangeData(data2);
|
||||
}
|
||||
}
|
||||
|
||||
#region 示例1
|
||||
@ -44,4 +64,49 @@
|
||||
|
||||
#endregion 示例1
|
||||
|
||||
#region 示例2
|
||||
|
||||
readonly AreaConfig config2 = new AreaConfig
|
||||
{
|
||||
Title = new Title
|
||||
{
|
||||
Visible = true,
|
||||
Text = "基础面积图 - 缩略轴"
|
||||
},
|
||||
|
||||
Description = new Description
|
||||
{
|
||||
Visible = true,
|
||||
Text = "缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。"
|
||||
},
|
||||
|
||||
XField = "城市",
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Visible = true,
|
||||
Label = new BaseAxisLabel
|
||||
{
|
||||
Visible = true,
|
||||
AutoHide = true,
|
||||
}
|
||||
},
|
||||
YField = "销售额",
|
||||
|
||||
Interactions = new Interaction[]
|
||||
{
|
||||
new Interaction
|
||||
{
|
||||
Type="slider",
|
||||
Cfg = new
|
||||
{
|
||||
start =0.5,
|
||||
end =0.55
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
#endregion 示例2
|
||||
|
||||
}
|
||||
@ -3,25 +3,70 @@
|
||||
@inject NavigationManager NavigationManager
|
||||
@inject HttpClient HttpClient
|
||||
|
||||
<Tabs>
|
||||
<Tabs ActiveKeyChanged="OnTabChanged">
|
||||
<TabPane Key="1">
|
||||
<Tab>示例1</Tab>
|
||||
<ChildContent>
|
||||
<StackedArea @ref="chart1" TItem="OilItem" Config="config1"/>
|
||||
<StackedArea @ref="chart1" TItem="OilItem" Config="config1" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="2">
|
||||
<Tab>示例2</Tab>
|
||||
<ChildContent>
|
||||
<StackedArea @ref="chart2" TItem="OilItem" Config="config2" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="3">
|
||||
<Tab>示例3</Tab>
|
||||
<ChildContent>
|
||||
<StackedArea @ref="chart3" TItem="OilItem" Config="config3" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
<TabPane Key="4">
|
||||
<Tab>示例4</Tab>
|
||||
<ChildContent>
|
||||
<StackedArea @ref="chart4" TItem="EmissionsItem" Config="config4" />
|
||||
</ChildContent>
|
||||
</TabPane>
|
||||
|
||||
</Tabs>
|
||||
|
||||
@code{
|
||||
|
||||
IChartComponent chart1;
|
||||
IChartComponent chart2;
|
||||
IChartComponent chart3;
|
||||
IChartComponent chart4;
|
||||
|
||||
|
||||
protected override async Task OnInitializedAsync()
|
||||
{
|
||||
var data1 = await ChartsDemoData.OilAsync(NavigationManager, HttpClient);
|
||||
chart1.ChangeData(data1);
|
||||
|
||||
await base.OnInitializedAsync();
|
||||
OnTabChanged("1");
|
||||
}
|
||||
|
||||
private async void OnTabChanged(string activeKey)
|
||||
{
|
||||
if (activeKey == "1")
|
||||
{
|
||||
var data1 = await ChartsDemoData.OilAsync(NavigationManager, HttpClient);
|
||||
chart1.ChangeData(data1);
|
||||
}
|
||||
else if (activeKey == "2")
|
||||
{
|
||||
var data1 = await ChartsDemoData.OilAsync(NavigationManager, HttpClient);
|
||||
chart2.ChangeData(data1);
|
||||
}
|
||||
else if (activeKey == "3")
|
||||
{
|
||||
var data1 = await ChartsDemoData.OilAsync(NavigationManager, HttpClient);
|
||||
chart3.ChangeData(data1);
|
||||
}
|
||||
else
|
||||
{
|
||||
var data4 = await ChartsDemoData.EmissionsAsync(NavigationManager, HttpClient);
|
||||
chart4.ChangeData(data4);
|
||||
}
|
||||
}
|
||||
|
||||
#region 示例1
|
||||
@ -36,7 +81,7 @@
|
||||
XField = "date",
|
||||
YField = "value",
|
||||
StackField = "country",
|
||||
Color = new[] {"#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f"},
|
||||
Color = new[] { "#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f" },
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Type = "dateTime",
|
||||
@ -52,4 +97,96 @@
|
||||
|
||||
#endregion 示例1
|
||||
|
||||
#region 示例2
|
||||
|
||||
readonly StackedAreaConfig config2 = new StackedAreaConfig
|
||||
{
|
||||
Title = new Title
|
||||
{
|
||||
Visible = true,
|
||||
Text = "堆叠面积图-areaLabel"
|
||||
},
|
||||
|
||||
Description = new Description
|
||||
{
|
||||
Visible = true,
|
||||
Text = "堆叠面积图中，将label type设置为area时，label显示在堆叠区域内，使用户能够更容易的通过视觉将label和对应图形产生联系。autoScale配置项设置为true时，label会自适应堆叠区域的大小。"
|
||||
},
|
||||
|
||||
XField = "date",
|
||||
YField = "value",
|
||||
StackField = "country",
|
||||
Color = new[] { "#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f" },
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Type = "dateTime",
|
||||
TickCount = 5
|
||||
},
|
||||
Legend = new Legend
|
||||
{
|
||||
Visible = true,
|
||||
Position = "right-top"
|
||||
}
|
||||
};
|
||||
|
||||
#endregion 示例2
|
||||
|
||||
#region 示例3
|
||||
|
||||
readonly StackedAreaConfig config3 = new StackedAreaConfig
|
||||
{
|
||||
Title = new Title
|
||||
{
|
||||
Visible = true,
|
||||
Text = "堆叠面积图 - lineLabel"
|
||||
},
|
||||
Description = new Description
|
||||
{
|
||||
Visible = true,
|
||||
Text = "当label类型设置为line时，label与面积区域尾端顶部对齐。"
|
||||
},
|
||||
XField = "date",
|
||||
YField = "value",
|
||||
StackField = "country",
|
||||
Color = new[] { "#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f" },
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Type = "dateTime",
|
||||
TickCount = 5
|
||||
},
|
||||
Label = new StackedAreaLabel
|
||||
{
|
||||
Visible = true,
|
||||
Type = "line",
|
||||
},
|
||||
Legend = new Legend
|
||||
{
|
||||
Visible = false,
|
||||
}
|
||||
};
|
||||
|
||||
#endregion 示例3
|
||||
|
||||
#region 示例4
|
||||
|
||||
readonly StackedAreaConfig config4 = new StackedAreaConfig
|
||||
{
|
||||
Title = new Title
|
||||
{
|
||||
Visible = true,
|
||||
Text = "The causes of CO2 emissions"
|
||||
},
|
||||
XField = "year",
|
||||
YField = "value",
|
||||
SeriesField = "category",
|
||||
Color = new[] { "#6897a7", "#8bc0d6", "#60d7a7", "#dedede", "#fedca9", "#fab36f", "#d96d6f" },
|
||||
XAxis = new ValueCatTimeAxis
|
||||
{
|
||||
Type = "time",
|
||||
Mask = "YYYY",
|
||||
},
|
||||
};
|
||||
|
||||
#endregion 示例4
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user