使用Xamarin在Listview中创建微图表

我正在使用xamarin.forms，我需要在listview内部创建图形，如何使用microcharts在listview内部创建图形

这是我在xaml中的代码：

这是我在xaml.cs中的代码：

namespace PrismUnityApp6.Views
{
public partial class MainPage : ContentPage
{

    List<Entry> entries = new List<Entry>
    {
        new Entry(200)
        {
            Color = SKColor.Parse("#008000"),
        },
        new Entry(400)
        {
            Color = SKColor.Parse("#FFFFFF")
        }

    };

    public MainPage()
    {

        InitializeComponent();

        Chart1.Chart = new RadialGaugeChart { Entries = entries };

    }
}

namespace primunityapp6.Views
{
公共部分类主页：ContentPage
{
列表条目=新列表
{
新条目（200）
{
Color=SKColor.Parse（“#008000”），
},
新条目（400）
{
Color=SKColor.Parse（“#FFFFFF”）
}
};
公共主页（）
{
初始化组件（）；
图表1.图表=新的RadialGaugeChart{Entries=Entries}；
}
}

}

我尝试了这段代码，但在使用listview时无法在xaml.cs文件中获取图表的名称

---

如有任何建议，将不胜感激。谢谢。

项目模板中有图表。可能有很多图表，它们不能有相同的名称。正确的方法是在ItemTemplate内部使用绑定

讨论了类似的问题

这个例子只是为了演示它是如何工作的。在您尝试这个演示之后，请确保您了解了MVVM模式，并在您的项目中使用它

主页.xaml

<ContentPage.Content>
    <ListView
       x:Name="MyListview">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout>
                        <microcharts:ChartView Chart="{Binding ChartData}" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage.Content>

MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    List<MyChart> MyCharts;

    public MainPage()
    {
        InitializeComponent();
        MyCharts = new List<MyChart>();
        PopulateCharts();
    }

    private void PopulateCharts()
    {
        MyCharts.Add(new MyChart() { ChartData = Chart1 });
        MyCharts.Add(new MyChart() { ChartData = Chart2 });
        MyListview.ItemsSource = MyCharts;
    }

    public class MyChart
    {
        public Chart ChartData { get; set; }
    }

    public Chart Chart1 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "iOS",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "Shared",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.White
    };


    public Chart Chart2 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "Android",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "UWP",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.Yellow
    };
}

public分部类主页面：ContentPage
{
列出我的图表；
公共主页（）
{
初始化组件（）；
MyCharts=新列表（）；
大众艺术（）；
}
私人艺术
{
添加（新的MyChart（）{ChartData=Chart1}）；
添加（新的MyChart（）{ChartData=Chart2}）；
MyListview.ItemsSource=MyCharts；
}
公共类MyChart
{
公共图表图表数据{get；set；}
}
公共图表Chart1=>新条形图（）
{
条目=新[]
{
新Microcharts.条目（128）
{
Label=“iOS”，
ValueLabel=“128”，
Color=SKColor.Parse（“#b455b6”）
},
新Microcharts.条目（514）
{
Label=“共享”，
ValueLabel=“514”，
Color=SKColor.Parse（#3498db）
}},
BackgroundColor=SKColors.White
};
公共图表Chart2=>新条形图（）
{
条目=新[]
{
新Microcharts.条目（128）
{
Label=“Android”，
ValueLabel=“128”，
Color=SKColor.Parse（“#b455b6”）
},
新Microcharts.条目（514）
{
Label=“UWP”，
ValueLabel=“514”，
Color=SKColor.Parse（#3498db）
}},
BackgroundColor=SKColors.黄色
};
}

---

在我提到的博客文章中，还有一个使用MVVM模式的好例子。

您有关于如何使用绑定创建图表的资源吗？抱歉，我是xamarin的新手。您到底想要实现什么？你需要在一页上有一个或多个图表吗？我会使用这些图表。。是的，我需要在一个页面上显示一个或多个图表，但如何使用它进行绑定？

public partial class MainPage : ContentPage
{
    List<MyChart> MyCharts;

    public MainPage()
    {
        InitializeComponent();
        MyCharts = new List<MyChart>();
        PopulateCharts();
    }

    private void PopulateCharts()
    {
        MyCharts.Add(new MyChart() { ChartData = Chart1 });
        MyCharts.Add(new MyChart() { ChartData = Chart2 });
        MyListview.ItemsSource = MyCharts;
    }

    public class MyChart
    {
        public Chart ChartData { get; set; }
    }

    public Chart Chart1 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "iOS",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "Shared",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.White
    };


    public Chart Chart2 => new BarChart()
    {
        Entries = new[]
        {
             new Microcharts.Entry(128)
             {
                 Label = "Android",
                 ValueLabel = "128",
                 Color = SKColor.Parse("#b455b6")
             },
             new Microcharts.Entry(514)
             {
                 Label = "UWP",
                 ValueLabel = "514",
                 Color = SKColor.Parse("#3498db")
        }},
        BackgroundColor = SKColors.Yellow
    };
}