Диаграмма ASP.NET MVC: как отображать значения в каждом столбце

Я понимаю, что вы не хотите трогать код на стороне сервера, но варианты кажутся ограниченными. Я не уверен, что вы можете это сделать, но если вы можете изменить серверную часть, вы обязательно сможете внести эти изменения.

Я сделал это для вас:

1. Добавьте System.Web.DataVisualization; на ваш сайт MVC.
2. Добавьте «используя System.Web.UI.DataVisualization.Charting;» к вашему контроллеру.

3. Включите приведенный ниже код в свой контроллер:

            public ActionResult CreateChart()
            {   
            Bitmap image = new Bitmap(500, 50);
            Graphics g = Graphics.FromImage(image);
            var chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
            chart1.Width = 1000;
            chart1.Height = 300;
            chart1.ChartAreas.Add("xAxis").BackColor = System.Drawing.Color.FromArgb     (64,System.Drawing.Color.White);
            chart1.Series.Add("xAxis");
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(8);
            chart1.Series["xAxis"].Points.AddY(6);
            chart1.Series["xAxis"].Points.AddY(5);    
            chart1.Series["xAxis"].IsValueShownAsLabel = true;
            chart1.BackColor = Color.Transparent;
            MemoryStream imageStream = new MemoryStream();
            chart1.SaveImage(imageStream, ChartImageFormat.Png);
            chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.SystemDefault;
            Response.ContentType = "image/png";
            imageStream.WriteTo(Response.OutputStream);
            g.Dispose();
            image.Dispose();
            return null;
       }
   

4. Включите приведенный ниже фрагмент кода в свое представление, где вы хотите увидеть диаграмму.

5. Now run the code and you will be able to see this.

   

Настройте параметры по мере необходимости. Надеюсь это поможет.

Я думаю, вам нужно напрямую взаимодействовать с точками, чтобы добавить значение метки. Надеюсь, этот короткий пример будет кому-то полезен. Он добавляет область диаграммы в код, а не в тему xml, но я уверен, что при необходимости ее можно поменять местами.

public ActionResult Chart()
{
    var chart = new System.Web.UI.DataVisualization.Charting.Chart();
    chart.ChartAreas.Add(new ChartArea());

    // Dummy data
    var data = Enumerable.Range(1, 2).Select(i => new { Name = i.ToString(), Count = i }).ToArray();

    chart.Series.Add(new Series("Data"));
    chart.Series["Data"].ChartType = SeriesChartType.Column;

    for (int x = 0; x < data.Length; x++)
    {
        // Add each point and set its Label
        int ptIdx = chart.Series["Data"].Points.AddXY(
             data[x].Name,
             data[x].Count);
        DataPoint pt = chart.Series["Data"].Points[ptIdx];
        pt.Label = "#VALX: #VALY";
        pt.Font = new System.Drawing.Font("Arial", 12f, FontStyle.Bold);
        pt.LabelForeColor = Color.Green;
    }

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

Тогда в моем представлении бритвы у меня просто есть:

<img alt="alternateText" src="@Url.Action("Chart")" />

Значение pt.Label является своего рода строкой формата и может использовать "#VALX" или "#VALY" для отображения только одного или другого.

вы можете добавить это в xml в своем коде, чтобы показать число над каждой точкой данных

<Series>
  <Series Name=""Default"" IsValueShownAsLabel=""true""></Series>
</Series>

затем добавьте имя к серии диаграмм в объекте диаграммы.

var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
  name:"Default",
  chartType: "column",

имя в вашей серии xml должно совпадать с именем в объекте диаграммы