使用syncfusion列图表系列中的隐藏字段 [英] Use Hidden field in syncfusion column chart series
本文介绍了使用syncfusion列图表系列中的隐藏字段的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
现在我必须为每个图表设置隐藏字段生成在每个轴上，并希望得到该图表的点击函数调用隐藏的字段的值。
控制器：
public ActionResult SyncfusionChart（）
{
List< ChartData> data = new List< ChartData>（）;
data.Add（新ChartData（Jan，35，1））;
data.Add（新ChartData（Feb，28，2））;
data.Add（新ChartData（Mar，34，3））;
data.Add（新ChartData（Apr，32，4））;
data.Add（新ChartData（May，40，5））;
data.Add（新ChartData（Jun，32，6））;
data.Add（新ChartData（Jul，35，7））;
data.Add（新ChartData（Aug，55，8））;
data.Add（新ChartData（Sep，38，9））;
data.Add（新ChartData（Oct，30，10））;
data.Add（新ChartData（11月，25，11））;
data.Add（新ChartData（Dec，32，12））;
}
public class ChartData
{
public string Month;
public double Sales;
public int id;
public ChartData（字符串月，双重销售，int id）
{
this.Month = month;
this.Sales = sales;
this.id = id;
$ / code $ / pre
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））。标题（tl => tl.Text（Sum ）））
.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>
$ b $（函数（）{
$（＃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产品。 b
$ b
我们分析了您的查询。您的要求可以通过解决方法来实现，并且我们准备了一个样本。在控制器中，我们已将隐藏的字段数据传递给viewbag，并在pointRegionClick事件中获取了dataSource。
//将dataSource赋值给viewbag
List< ChartData> data = new List< ChartData>（）;
data.Add（新ChartData（Jan，35,100））;
data.Add（新ChartData（Feb，28,200））;
data.Add（新ChartData（Mar，34，300））;
data.Add（新ChartData（Apr，32，400））;
data.Add（新ChartData（May，40，500））;
data.Add（新ChartData（Jun，32，600））;
data.Add（新ChartData（Jul，35，700））;
data.Add（新ChartData（Aug，55，800））;
data.Add（新ChartData（Sep，38，900））;
data.Add（新ChartData（Oct，30，300））;
data.Add（新ChartData（Nov，25，700））;
data.Add（新ChartData（Dec，32，200））;
ViewBag.ChartData = data;
@（Html.EJ（）。Chart（chartContainer）
// ...
.PointRegionClick（mousemove）
）
function mousemove（发送者）{
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）;
$ / code>
代码片段（ @ Html.Raw（Json.Encode ViewBag.ChartData）））用于在脚本中将图表数据转换为Json。
为了便于参考，我们附上了示例。请参阅示例链接
谢谢，
Dharani。
I am using syncfusion in ASP.NET MVC for my application to display chart and I done it well.
Now I have to set hidden field for every chart that generated on every axes and want to get that hidden field's value on click function call of chart.
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>
解决方案 Thanks for using Syncfusion product.
We have analyzed your query. Your requirement can be achieved as workaround and we have prepared a sample. In the controller, we have passed the hidden field data to viewbag and obtained the dataSource in the pointRegionClick event. Kindly find the code snippet below.
//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);
}
The code snippet(@Html.Raw(Json.Encode(ViewBag.ChartData))) is used to convert the chart data as Json in the script.
For your reference we have attached the sample. Kindly find the Sample Link
Thanks,
Dharani.
这篇关于使用syncfusion列图表系列中的隐藏字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
