Les valeurs dans un graphique en secteurs

Comment afficher les valeurs de chaque tarte dans un graphique à l'aide de ChartHelper? Je suis à l'aide de MVC3/syntaxe Razor.

Essayer de faire quelque chose comme ceci:

Les valeurs dans un graphique en secteurs

L'image est de ce tutoriel pour ChartHelper MVC:

Mon code:

var bytes = new Chart(600, 300).AddSeries(
                    chartType: "pie",
                    legend: "Sales in Store per Payment Collected",
                    xValue: viewModel.SalesInStorePerPaymentCollected.XValues,
                    yValues: viewModel.SalesInStorePerPaymentCollected.YValues
                    )
                    .GetBytes("png");


            return File(bytes, "image/png");
Vous pouvez également réaliser cette image en combinant à la fois côté client et côté serveur. Faites glisser et déposez un Graphique de contrôle, de jouer avec html et css pour le positionner. Jeu de la Série CustomProperties="PieLineColor=Noir, PieLabelStyle=à l'Extérieur", de personnaliser des Points à votre désir et de gérer l'extérieur les valeurs des étiquettes à partir de votre code côté serveur en appelant le Tableau.Série[0].Points[0].SetValueY(valeur) "pour définir la valeur de chaque morceau de tarte et" Chart1.Série[0].Points[0].Label = valeur " pour régler l'extérieur, le texte de l'étiquette. Vous ne savez pas comment vous séparer un morceau de tarte. Peut-être en jouant avec les xAxis

OriginalL'auteur Anish | 2011-12-06

  1. 13

    Je l'ai fait à l'aide de la System.Web.UI.DataVisualization.Charting.Chart classe.

    Voici le code dans mon Controller:

    public ActionResult Chart()
{
    Chart chart = new Chart();
    chart.ChartAreas.Add(new ChartArea());

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Pie;
    chart.Series["Data"]["PieLabelStyle"] = "Outside"; 
    chart.Series["Data"]["PieLineColor"] = "Black";
    chart.Series["Data"].Points.DataBindXY(
        data.Select(data => data.Name.ToString()).ToArray(), 
        data.Select(data => data.Count).ToArray());
    //Other chart formatting and data source omitted.

    MemoryStream ms = new MemoryStream();
    chart.SaveImage(ms, ChartImageFormat.Png);
    return File(ms.ToArray(), "image/png");
}

    Et la Vue:

    <img alt="alternateText" src="@Url.Action("Chart")" />
    Mon tableau est à partir du Système.Web.Les aides de l'espace de noms. Il ressemble à votre graphique est à partir du Système.Web.L'INTERFACE utilisateur.DataVisualization.La création de graphiques. Comment avez-vous un Système de retour.Web.L'INTERFACE utilisateur.DataVisualization.La création de graphiques.Graphique pour un MVC Vue?
    Vous avez tout à fait raison, désolé. J'ai mis à jour mon échantillon pour englober toute la Méthode de Contrôleur et la Vue.

    OriginalL'auteur DaveShaw

  2. 4

    Ma solution grâce à DaveShaw. Besoins peu plus de peaufinage, mais me donne le plus de ce dont j'ai besoin.

            Chart chart = new Chart();
chart.ChartAreas.Add(new ChartArea());
chart.Series.Add(new Series("Data"));
chart.Legends.Add(new Legend("Stores"));
chart.Series["Data"].ChartType = SeriesChartType.Pie;
chart.Series["Data"]["PieLabelStyle"] = "Outside";
chart.Series["Data"]["PieLineColor"] = "Black";
for (int x = 0; x < viewModel.SalesInStorePerPaymentCollected.XValues.Length; x++)
{
int ptIdx = chart.Series["Data"].Points.AddXY(
viewModel.SalesInStorePerPaymentCollected.XValues[x],
viewModel.SalesInStorePerPaymentCollected.YValues[x]);
DataPoint pt = chart.Series["Data"].Points[ptIdx];
pt.LegendText = "#VALX: #VALY";
pt.LegendUrl = "/Contact/Details/Hey";
}
chart.Series["Data"].Label = "#PERCENT{P0}";
chart.Series["Data"].Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
chart.Series["Data"].ChartType = SeriesChartType.Pie;
chart.Series["Data"]["PieLabelStyle"] = "Outside";
chart.Series["Data"].Legend = "Stores";
chart.Legends["Stores"].Docking = Docking.Bottom;
var returnStream = new MemoryStream();
chart.ImageType = ChartImageType.Png;
chart.SaveImage(returnStream);
returnStream.Position = 0;
return new FileStreamResult(returnStream, "image/png");

    Rend à ceci:

    Les valeurs dans un graphique en secteurs

    OriginalL'auteur Anish

  3. 3

    ma réponse et la solution (fonctionne avec l'explication):

    cela convient à la MVC 4 et MVC 3 avec .NET 4 cadre et l'ajout de la référence à System.Web.DataVisualization.dll et pas la .net Système.Web.Des aides, les DataVisualization.dll peut être trouvé à
    http://www.codeproject.com/Articles/125230/ASP-NET-MVC-Chart-Control

    ChartApplication->Références Externes

    plus d'infos sur les graphiques avec la DataVisualization peuvent y être trouvés.

    jamais l'esprit, il pourrait être remplacé par:

            public ActionResult Chart()
{
Chart chart = new Chart();
chart.ChartAreas.Add(new ChartArea());
chart.Series.Add(new Series("Data"));
chart.Legends.Add(new Legend("Stores"));
chart.Series["Data"].ChartType = SeriesChartType.Spline;
chart.Series["Data"].Points.AddXY(1.0, 5.0);
chart.Series["Data"].Points.AddXY(2.0, 9.0);
/*
chart.Series["Data"]["PieLabelStyle"] = "Outside";
chart.Series["Data"]["PieLineColor"] = "Black";
*/
/*
int ptIdx = chart.Series["Data"].Points.AddXY(1.0, 5.0);
DataPoint pt = chart.Series["Data"].Points[ptIdx];
pt.LegendText = "#VALX: #VALY";
pt.LegendUrl = "/Contact/Details/Hey";
*/
/*
chart.Series["Data"].Label = "#PERCENT{P0}";
chart.Series["Data"].Font = new Font("Segoe UI", 8.0f, FontStyle.Bold);
chart.Series["Data"].ChartType = SeriesChartType.Pie;
chart.Series["Data"]["PieLabelStyle"] = "Outside";
chart.Series["Data"].Legend = "Stores";
chart.Legends["Stores"].Docking = Docking.Bottom;
*/
var returnStream = new MemoryStream();
chart.ImageType = ChartImageType.Png;
chart.SaveImage(returnStream);
returnStream.Position = 0;
return new FileStreamResult(returnStream, "image/png");
}

    ou (pour le mvc 4 et mvc 3 avec .net 4 et du Système.Web.Les aides):

            public ActionResult Chart()
{
var bytes = new Chart(600, 300).AddSeries(
chartType: "pie",
legend: "Sales in Store per Payment Collected",
xValue: new[] { "Jan", "Feb", "Mar", "Apr", "May" },
yValues: new[] { "20", "20", "40", "10", "10" }
)
.Write("png");
return null;
}

    et bien sûr, vous avez besoin à la fois d'ajouter à l' .cshtml suivantes:

    <img src="/Home/Chart" alt="" />

    OriginalL'auteur Yakir Manor