syncfusion 세로 막 대형 차트 계열의 숨겨진 필드 사용

Question

내 응용 프로그램에서 차트를 표시하기 위해 ASP.NET MVC에서 syncfusion을 사용하고 있습니다.

이제 모든 축마다 생성 된 모든 차트에 대해 숨겨진 필드를 설정해야하며 차트의 클릭 함수 호출에서 숨겨진 필드의 값을 가져 오려고합니다.

컨트롤러 :

public ActionResult SyncfusionChart() 
     { 
    List<ChartData> data = new List<ChartData>(); 
       data.Add(new ChartData("Jan", 35, 1)); 
       data.Add(new ChartData("Feb", 28, 2)); 
       data.Add(new ChartData("Mar", 34, 3)); 
       data.Add(new ChartData("Apr", 32, 4)); 
       data.Add(new ChartData("May", 40, 5)); 
       data.Add(new ChartData("Jun", 32, 6)); 
       data.Add(new ChartData("Jul", 35, 7)); 
       data.Add(new ChartData("Aug", 55, 8)); 
       data.Add(new ChartData("Sep", 38, 9)); 
       data.Add(new ChartData("Oct", 30, 10)); 
       data.Add(new ChartData("Nov", 25, 11)); 
       data.Add(new ChartData("Dec", 32, 12)); 
} 
    public class ChartData 
     { 
      public string Month; 
      public double Sales; 
      public int id; 
      public ChartData(string month, double sales, int id) 
      { 
       this.Month = month; 
       this.Sales = sales; 
       this.id = id; 
      } 
     } 

CSHTML : Syncfusion 제품을 사용

<div> 
    @(Html.EJ().Chart("chartContainer") 
     .PrimaryXAxis(pr => pr.Title(tl => tl.Text("Rep Code"))) 
     .PrimaryYAxis(pr => pr.Range(ra => ra.Max(500).Min(0).Interval(50)).Title(tl => tl.Text("Sum (Price)"))) 
     .CommonSeriesOptions(cr => cr.Type(SeriesType.Column).EnableAnimation(true)) 
     .Title(t => t.Text("Report Demo")) 
     .Series(sr => 
     { 
      sr.DataSource(ViewBag.ChartData) 
      .Type(SeriesType.Column) 
      .XName("Month").YName("Sales") 
      .Name("Months") 
      .Add(); 
     }) 
    ) 
</div> 

<script type="text/javascript"> 

    $(function() { 
     $("#chartContainer").ejChart({ 
      pointRegionClick: "mousemove" 
     }); 
    }); 

    function mousemove(sender) { 
     series = sender.model.series[sender.data.region.SeriesIndex]; 
     var X = series.points[sender.data.region.Region.PointIndex].x; 
     var Y = series.points[sender.data.region.Region.PointIndex].y; 
     alert("X:" + X + " Y:" + Y); 
    } 
</script> 

Answer 1

감사합니다.

귀하의 질의를 조사한 결과, 해결 방법으로 요구 사항을 달성 할 수 있으며 샘플을 준비했습니다. 컨트롤러에서 숨겨진 필드 데이터를 뷰 백에 전달하고 pointRegionClick 이벤트에서 dataSource를 가져 왔습니다. 아래 코드를 찾으십시오.

//Assigning dataSource to viewbag 
List<ChartData> data = new List<ChartData>(); 
     data.Add(new ChartData("Jan", 35,100)); 
     data.Add(new ChartData("Feb", 28,200)); 
     data.Add(new ChartData("Mar", 34, 300)); 
     data.Add(new ChartData("Apr", 32, 400)); 
     data.Add(new ChartData("May", 40, 500)); 
     data.Add(new ChartData("Jun", 32, 600)); 
     data.Add(new ChartData("Jul", 35, 700)); 
     data.Add(new ChartData("Aug", 55, 800)); 
     data.Add(new ChartData("Sep", 38, 900)); 
     data.Add(new ChartData("Oct", 30, 300)); 
     data.Add(new ChartData("Nov", 25, 700)); 
     data.Add(new ChartData("Dec", 32, 200)); 
     ViewBag.ChartData = data; 
@(Html.EJ().Chart("chartContainer") 
    //... 
    .PointRegionClick("mousemove") 
) 
function mousemove(sender) { 
    var dataSource = @Html.Raw(Json.Encode(ViewBag.ChartData)); 
    series = sender.model.series[sender.data.region.SeriesIndex]; 
    var X = series.points[sender.data.region.Region.PointIndex].x; 
    var Y = series.points[sender.data.region.Region.PointIndex].y; 
    var hiddenField = dataSource[sender.data.region.Region.PointIndex]. 
         HiddenField; 
    alert("X:" + X + " Y:" + Y + " HiddenField: "+ hiddenField); 
} 

코드 조각 (@ Html.Raw (Json.Encode (ViewBag.ChartData))는) 스크립트에서 JSON으로 차트 데이터를 변환하는 데 사용됩니다.

참조 용으로 샘플을 첨부했습니다. 친절하게 Sample Link

감사합니다, Dharani.