Использование скрытого поля в колонке синхронных диаграмм серии

Question

Я использую syncfusion в ASP.NET MVC для моего приложения для отображения графика, и я сделал это хорошо.

Теперь я должен установить скрытое поле для каждого графика, сгенерированного на всех осях, и хочу получить значение этого скрытого поля при вызове функции щелчка диаграммы.

Контроллер:

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:

<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

Спасибо за использование продукта Syncfusion.

Мы проанализировали ваш запрос. Ваше требование может быть достигнуто в качестве обходного пути, и мы подготовили образец. В контроллере мы передали скрытые данные поля для просмотра и получили источник данных в событии pointRegionClick. Пожалуйста, найдите фрагмент кода ниже.

//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.