问题
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>
回答1:
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.
来源:https://stackoverflow.com/questions/41220815/use-hidden-field-in-syncfusion-column-chart-series