jquery - 在 syncfusion 柱形图系列中使用隐藏字段

Question

我在 ASP.NET MVC 中使用 syncfusion 让我的应用程序显示图表，我做得很好。

现在我必须为在每个轴上生成的每个图表设置隐藏字段，并希望在点击图表函数调用时获取该隐藏字段的值。

Controller :

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 产品。

我们已经分析了您的查询。您的要求可以作为解决方法来实现，我们已经准备了一个样本。在controller中，我们已经将隐藏字段数据传递给viewbag，并在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

谢谢，陀罗尼。