3

アプリケーションがチャートを表示するために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:

<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>
4

1 に答える 1

1

Syncfusion 製品をご利用いただきありがとうございます。

クエリを分析しました。お客様の要件は回避策として実現でき、サンプルを用意しました。コントローラーでは、隠しフィールド データを 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 として変換するために使用されます。

ご参考までにサンプルを添付いたします。サンプルリンクを見つけてください

ありがとう、ダラニ。

于 2016-12-20T11:59:34.223 に答える