在 syncfusion 柱形图系列中使用隐藏字段
Use Hidden field in syncfusion column chart series
我在 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>
感谢您使用 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
谢谢,
陀罗尼.
我在 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>
感谢您使用 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
谢谢, 陀罗尼.