ASP.NET 图表饼图 - 每片的内部和外部标签
ASP.NET Charting Pie Chart - both inside and outside label per slice
在现有应用程序中(Web 表单,但底层 Microsoft Charting 堆栈与 winforms/webforms/razor 图表基本相同)我有饼图,每个切片都有以下业务数据:
- 价值
- 标签
- 颜色(用于分类,多个切片相同颜色)
要求是一张图表,所有信息布局在一个图表中,如下所示(模型):
使用 Series/Points 上的 CustomProperties,我可以使用 Inside
显示每个数据点
或外部标签:
但不是两者。我能以某种方式让饼图显示 both 每个数据点的内部和外部标签吗?
我意识到这是一个边缘案例(通常你会使用图例+颜色来可视化它,但我们已经使用颜色来分类)。我宁愿避免首先渲染到位图并在上面手动渲染标签文本(因为有适当的机制可以将图表流式传输到网页和生成的文档)。
创建两个系列和两个图表区域并将它们叠加:
ASPX:
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Pie"
Name="Series1"
CustomProperties="PieLabelStyle=Inside, PieStartAngle=270"
BorderColor="White"
ChartArea="ChartArea1">
</asp:Series>
<asp:Series ChartType="Pie"
Name="Series2"
CustomProperties="PieLabelStyle=Outside, PieStartAngle=270"
ChartArea="ChartArea2">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" >
<InnerPlotPosition Height="95" Width="45.98404" X="27.00798" Y="2.50000072" />
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2"
AlignWithChartArea="ChartArea1"
AlignmentOrientation="All"
BackColor="Transparent">
<InnerPlotPosition Height="95" Width="45.98404" X="27.00798" Y="2.50000072" />
</asp:ChartArea>
</chartareas>
</asp:Chart>
CS:
protected void Page_Load(object sender, EventArgs e)
{
List<MyDataModel> data = new List<MyDataModel> {
new MyDataModel { Color = Color.LightBlue, Label = "Value 1", Value = 100 },
new MyDataModel { Color = Color.LightBlue, Label = "Value 2", Value = 100 },
new MyDataModel { Color = Color.LightBlue, Label = "Value 3", Value = 100 },
new MyDataModel { Color = Color.Blue, Label = "Value 4", Value = 100 },
new MyDataModel { Color = Color.Blue, Label = "Value 5", Value = 400 },
};
foreach (MyDataModel dm in data)
{
Chart1.Series[0].Points.Add(new DataPoint
{
Color = dm.Color,
Label = dm.Value.ToString(),
YValues = new double[] { dm.Value }
});
Chart1.Series[1].Points.Add(new DataPoint
{
Color = Color.Transparent,
Label = dm.Label,
YValues = new double[] { dm.Value }
});
}
}
在现有应用程序中(Web 表单,但底层 Microsoft Charting 堆栈与 winforms/webforms/razor 图表基本相同)我有饼图,每个切片都有以下业务数据:
- 价值
- 标签
- 颜色(用于分类,多个切片相同颜色)
要求是一张图表,所有信息布局在一个图表中,如下所示(模型):
使用 Series/Points 上的 CustomProperties,我可以使用 Inside
显示每个数据点或外部标签:
但不是两者。我能以某种方式让饼图显示 both 每个数据点的内部和外部标签吗?
我意识到这是一个边缘案例(通常你会使用图例+颜色来可视化它,但我们已经使用颜色来分类)。我宁愿避免首先渲染到位图并在上面手动渲染标签文本(因为有适当的机制可以将图表流式传输到网页和生成的文档)。
创建两个系列和两个图表区域并将它们叠加:
ASPX:
<asp:Chart ID="Chart1" runat="server">
<series>
<asp:Series ChartType="Pie"
Name="Series1"
CustomProperties="PieLabelStyle=Inside, PieStartAngle=270"
BorderColor="White"
ChartArea="ChartArea1">
</asp:Series>
<asp:Series ChartType="Pie"
Name="Series2"
CustomProperties="PieLabelStyle=Outside, PieStartAngle=270"
ChartArea="ChartArea2">
</asp:Series>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1" >
<InnerPlotPosition Height="95" Width="45.98404" X="27.00798" Y="2.50000072" />
</asp:ChartArea>
<asp:ChartArea Name="ChartArea2"
AlignWithChartArea="ChartArea1"
AlignmentOrientation="All"
BackColor="Transparent">
<InnerPlotPosition Height="95" Width="45.98404" X="27.00798" Y="2.50000072" />
</asp:ChartArea>
</chartareas>
</asp:Chart>
CS:
protected void Page_Load(object sender, EventArgs e)
{
List<MyDataModel> data = new List<MyDataModel> {
new MyDataModel { Color = Color.LightBlue, Label = "Value 1", Value = 100 },
new MyDataModel { Color = Color.LightBlue, Label = "Value 2", Value = 100 },
new MyDataModel { Color = Color.LightBlue, Label = "Value 3", Value = 100 },
new MyDataModel { Color = Color.Blue, Label = "Value 4", Value = 100 },
new MyDataModel { Color = Color.Blue, Label = "Value 5", Value = 400 },
};
foreach (MyDataModel dm in data)
{
Chart1.Series[0].Points.Add(new DataPoint
{
Color = dm.Color,
Label = dm.Value.ToString(),
YValues = new double[] { dm.Value }
});
Chart1.Series[1].Points.Add(new DataPoint
{
Color = Color.Transparent,
Label = dm.Label,
YValues = new double[] { dm.Value }
});
}
}