我使用System.Windows.Controls.DataVisualization.Charting繪製PieChart。 但我不知道如何顯示圖表上每個餅圖的百分比/價值。 這可能嗎?chartingToolkit:圖表如何顯示每個餅圖的值
0
A
回答
0
將百分比添加到System.Windows.Controls.DataVisualization.Charting PieChart
不是那麼直接,因爲沒有用於管理標籤的屬性。
無論如何有一些方法可以達到目標。我寫了一個article on my blog來描述我使用的那個。
的第一步是創建一個自定義PieDataPoint
類:
public class PieDataPoint : System.Windows.Controls.DataVisualization.Charting.PieDataPoint
{
public static readonly DependencyProperty TextedGeometryProperty =
DependencyProperty.Register("TextedGeometry", typeof(Geometry), typeof(PieDataPoint));
public Geometry TextedGeometry
{
get { return (Geometry)GetValue(TextedGeometryProperty); }
set { SetValue(TextedGeometryProperty, value); }
}
static PieDataPoint()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(PieDataPoint),
new FrameworkPropertyMetadata(typeof(PieDataPoint)));
}
public PieDataPoint()
{
DependencyPropertyDescriptor dependencyPropertyDescriptor
= DependencyPropertyDescriptor.FromProperty(GeometryProperty, GetType());
dependencyPropertyDescriptor.AddValueChanged(this, OnGeometryValueChanged);
}
private double LabelFontSize
{
get
{
FrameworkElement parentFrameworkElement = Parent as FrameworkElement;
return Math.Max(8, Math.Min(parentFrameworkElement.ActualWidth,
parentFrameworkElement.ActualHeight)/30);
}
}
private void OnGeometryValueChanged(object sender, EventArgs arg)
{
Point point;
FormattedText formattedText;
CombinedGeometry combinedGeometry = new CombinedGeometry();
combinedGeometry.GeometryCombineMode = GeometryCombineMode.Exclude;
formattedText = new FormattedText(FormattedRatio,
CultureInfo.CurrentCulture,
FlowDirection.LeftToRight,
new Typeface("Arial"),
LabelFontSize,
Brushes.White);
if (ActualRatio == 1)
{
EllipseGeometry ellipseGeometry = Geometry as EllipseGeometry;
point = new Point(ellipseGeometry.Center.X - formattedText.Width/2,
ellipseGeometry.Center.Y - formattedText.Height/2);
}
else if (ActualRatio == 0)
{
TextedGeometry = null;
return;
}
else
{
Point tangent;
Point half;
Point origin;
PathGeometry pathGeometry = Geometry as PathGeometry;
pathGeometry.GetPointAtFractionLength(.5, out half, out tangent);
pathGeometry.GetPointAtFractionLength(0, out origin, out tangent);
point = new Point(origin.X + ((half.X - origin.X)/2) - formattedText.Width/2,
origin.Y + ((half.Y - origin.Y)/2) - formattedText.Height/2);
}
combinedGeometry.Geometry1 = Geometry;
combinedGeometry.Geometry2 = formattedText.BuildGeometry(point);
TextedGeometry = combinedGeometry;
}
}
正如你可以看到它增加了一個FormattedText
幾何(用百分比)爲原始Geometry
。然後,您需要爲使用新幾何屬性(名爲TextedGeometry
)創建默認樣式(在generic.xaml字典中)。
樣式必須包含 - 至少 - 這樣的事情:
<Path Name="Slice" Data="{TemplateBinding local:PieDataPoint.TextedGeometry}"
Fill="{TemplateBinding Control.Background}"
Stroke="{TemplateBinding Control.BorderBrush}"
StrokeMiterLimit="1">
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding chartingToolkit:DataPoint.FormattedDependentValue}" />
<ContentControl Content="{TemplateBinding chartingToolkit:PieDataPoint.FormattedRatio}" />
</StackPanel>
</ToolTipService.ToolTip>
</Path>
正如你所看到的「切片」路徑都有其Data
屬性綁定到TextedGeometry
。
現在有了自定義PieSeries
我們可以強制Chart
控制使用我們PieDataPoint
:
public class PieSeries : System.Windows.Controls.DataVisualization.Charting.PieSeries
{
protected override DataPoint CreateDataPoint()
{
return new PieDataPoint();
}
}
所以在你的XAML可以使用:
<chartingToolkit:Chart Name="pieChart" Title="Pie Series Demo">
<local:PieSeries DependentValuePath="Value" IndependentValuePath="Key"
ItemsSource="{Binding}" IsSelectionEnabled="True" />
</chartingToolkit:Chart>
凡local
指的是你的自定義命名空間。我希望它能幫助你。
相關問題
- 1. 如何在JavaFX餅圖中顯示值?
- 2. Silverlight製圖 - 餅圖在圖表上顯示一個相關值
- 3. EXTJS餅圖..顯示前10個值
- 4. 谷歌圖表API - 餅圖不顯示
- 5. 餅圖中不顯示餅圖(Android)
- 6. devexpress餅圖顯示值的百分比
- 7. 如何在餅圖中顯示兩個值
- 8. 如何顯示餅圖時,我們只有一個值
- 9. Highcharts datalabels未顯示在餅圖的每個切片的盈
- 10. 如何在kibana餅圖顯示數
- 11. 如何在android中顯示餅圖
- 12. 如何在餅圖上顯示標籤
- 13. 在餅圖上顯示百分比值
- 14. 餅圖 - 顯示貨幣值 - Excel VBA
- 15. Google餅圖顯示百分比和值
- 16. 如何使用高圖顯示多個餅圖
- 17. 如何將matplotlib餅圖中顯示的值整圓?
- 18. 如何在Flot中顯示較小的值餅圖
- 19. 在融合圖表中顯示餅圖中的圖例
- 20. Android:如何顯示每分鐘值的圖表
- 21. 如何在餅圖外顯示高位圖工具提示?
- 22. jQuery Flot餅圖不顯示
- 23. Primeng餅圖不顯示
- 24. 未顯示餅圖WPF
- 25. 餅圖顯示成員
- 26. Bootstrap餅圖不顯示
- 27. Angular-nvD3餅圖不顯示
- 28. 並排顯示餅圖
- 29. MPAndroid不顯示餅圖
- 30. highcharts-ng不顯示餅圖
感謝您的非常詳細的答案,先生。 –
@NguyenMinhDat歡迎您,但如果您認爲我的回答適合您的問題,請將其標記爲正確答案 –