ASP.NET MVC 차트 : 각 열에 값을 표시하는 방법

Question

.NET Framework에서 제공하는 Chart functionnality를 사용하려고하지만 실제로 할 수없는 결과가 필요합니다.

내 코드 :

string themeChart = @"<Chart> 
         <ChartAreas> 
         <ChartArea Name=""Default"" _Template_=""All""> 
          <AxisY> 
          <LabelStyle Font=""Verdana, 12px"" /> 
          </AxisY> 
          <AxisX LineColor=""64, 64, 64, 64"" Interval=""1""> 
          <LabelStyle Font=""Verdana, 12px"" /> 
          </AxisX> 
         </ChartArea> 
         </ChartAreas> 
        </Chart>"; 


var dataChart = new Chart(width: 1000, height: 300, theme: themeChart).AddSeries(
     chartType: "column", 
     xValue: arrayXVal, 
     yValues: arrayYVal) 
      .AddTitle("ChartTitle") 
      .GetBytes("png"); 

return File(dataChart, "image/png"); 

내 차트는이 그림 같다.

은이 같은 도표를 수행해야

값은 열 이상일 수 또는 "에서"제 화상 등을들 수있다.

고맙습니다.

편집 :이 페이지는 W3School page입니다. 당신은 내가 필요한 것을 설명하는 이미지가 있음을 볼 수 있습니다. 그러나 코드는 제공되지 않습니다.

EDIT 2 :이 페이지를 또한 발견 : Displaying Data in a Chart with ASP.NET Web Pages (Razor) 코드가 제공되지 않습니다.

답변 : 때문에 귀하의 답변에 , 내 앞의 코드에서 거의 수정없이, DataVisualization.Charting을 사용하려고하고, 그것은 나에게 수용 가능한 결과를했다.

여기서 내 전체 코드를 찾을 수 있습니다 : 비트 맵 이미지 = 새 비트 맵 (1000, 300); 그래픽 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.White; chart1.Titles.Add ("차트 제목"); chart1.Series.Add ("xAxis");

 for (int i = 0; i < 24; i++) 
     { 
      chart1.Series["xAxis"].Points.AddXY(i + " h", arrayValues[i]); 
     } 

     chart1.Series["xAxis"].IsValueShownAsLabel = true; 
     chart1.Series["xAxis"].LabelForeColor = Color.Black; 
     chart1.ChartAreas[0].AxisX.Interval = 1; 
     chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.LightGray; 
     chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.LightGray; 
     chart1.BackColor = Color.White; 

     MemoryStream imageStream = new MemoryStream(); 
     chart1.SaveImage(imageStream, ChartImageFormat.Png); 
     chart1.TextAntiAliasingQuality = TextAntiAliasingQuality.High; 
     Response.ContentType = "image/png"; 
     imageStream.WriteTo(Response.OutputStream); 
     g.Dispose(); 
     image.Dispose(); 
     return null; 

답장을 보내 주신 Balthy에게 감사드립니다.

내가 처음이자 완전한 대답이기 때문에 부유 한 사람에게 증여 할 것이다.

나는 Adithya Kumaranchath의 대답을 "주된 대답"으로 표시 할 것입니다. 그 이유는 그가 따라야 할 단계에 대해 더 자세히 설명하기 때문입니다.

Answer 1

서버 측 코드를 건드리지 않으려는 부분이 있지만 옵션이 제한적인 것으로 알고 있습니다.그렇게 할 수 있는지 확신 할 수 없지만 서버 측을 변경할 수 있으면 이러한 변경 작업을 수행 할 수 있습니다.

나는 당신을 위해 이런 짓을했는지 :

1. 이 System.Web.DataVisualization 추가; 귀하의 MVC 웹 사이트에.
2. "using System.Web.UI.DataVisualization.Charting;"을 추가하십시오. 귀하의 컨트롤러에.
는 컨트롤러에 아래의 코드를 포함 : 차트를보고 싶은 곳

  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. 이제 코드를 실행하고이를 볼 수 있습니다. 필요에 따라

   

는 PARAMS을 사용자 정의합니다. 희망이 도움이됩니다.

Answer 2

레이블 값을 추가하려면 포인트와 직접 상호 작용해야한다고 생각합니다. 이 짧은 예제가 유용하게 사용되기를 바랍니다. 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"를 사용할 수 있습니다.