C# MVC - Drawing Bar Chart from Variables within Loop

问题

My question is in response to: Showing System.Web.Helpers.Chart in a partial view from the model

@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}

Has anyone been able to use values from a loop within the xValue and yValue. Currently in the examples I have found all the values are hard coded.

I would like to use the item.season as the X and item.year as the Y from the foreach statement below(first gather subject, second gathers year and season):

string json2 = File.ReadAllText(@"C:\Temp\Assess.json");
var root = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<List<WebApplication1.Models.SchoolSubject>>(json2);
        foreach (var subject in root)
        {
            <h2>@Html.Raw(subject.Subject)</h2>
            foreach (var item in subject.AppScores)
            {
               <p>@Html.Raw(item.Season)</p> 
                <p>@Html.Raw(item.year)</p>
                <p>@Html.Raw(item.value)</p>
                }
            }

Model with Class Code contained:

public class SchoolSubjectAppScore
    {
        public string Season { get; set; }
        public string year { get; set; }
        public string value { get; set; }
    }
    public class SchoolSubject
    {
        public SchoolSubject() { this.AppScores = new List<SchoolSubjectAppScore>(); }
        public string Subject { get; set; }
        public List<SchoolSubjectAppScore> AppScores { get; set; }
    }

The JSON file I have is:

[{"Subject": "English","AppScores": [{"Season": "Winter","year": "2009", "value" : "20" }, {"Season": "Summer","year": "2009", "value" : "38"}]}, {"Subject": "Maths","AppScores": [{"Season": "Winter","year": "2009", "value" : "10"}, {"Season": "Summer","year": "2009", "value" : "27"}]}]

The output on the graph I would like is two Series - Maths/English, the xValue - Season/Year and the yValue - Value.

Any ideas as I have look everywhere for help on this.

回答1:

That is easy. You just need to add your Season and year data from json to a List when you are in the Loop. Once you have the List you can convert it to an array and assign it to the Chart. See updated code below.

string json2 = File.ReadAllText(@"C:\Temp\Assess.json");
var root = new System.Web.Script.Serialization.JavaScriptSerialize().Deserialize<List<WebApplication1.Models.SchoolSubject>>(json2);

var seasons = new List<string>();
var years = new List<string>();

    foreach (var subject in root)
    {
        <h2>@Html.Raw(subject.Subject)</h2>
        foreach (var item in subject.AppScores)
        {
            <p>@Html.Raw(item.Season)</p> 
            <p>@Html.Raw(item.year)</p>

            seasons.Add(item.Season);
            years.Add(item.year);
            }
        }

After doing above you can add the seasons and years to the graph.

@{
var myChart = new Chart(width: 600, height: 400)
    .AddTitle("Chart Title")
    .AddSeries(
        name: "Employee",
        xValue: seasons.ToArray(),
        yValues: years.ToArray())
    .Write();
}

来源：https://stackoverflow.com/questions/35014469/c-sharp-mvc-drawing-bar-chart-from-variables-within-loop