public static MvcHtmlString GetHighChart(this HtmlHelper htmlHelper, ChartOption option) { return(new MvcHtmlString(GetHighChart(option).ToHtmlString())); }
public static DotNet.Highcharts.Highcharts GetHighChart(ChartOption option) { DotNet.Highcharts.Highcharts highChart = new DotNet.Highcharts.Highcharts(option.Name); var xa = new XAxis() { Type = AxisTypes.Category }; if (option.XAxisData != null) { xa.Categories = option.XAxisData; } var chart = new Chart { Type = option.ChartType, DefaultSeriesType = option.ChartType }; if (option.AjaxLoading) { chart.Events = new ChartEvents() { Load = "FetchDataFunc", Drilldown = "function(e) { DrillDownFunc(e) }", Drillup = "function(e) { FetchDataFunc() }" }; chart.Style = "fontWeight: 'normal', fontFamily: 'IRANSans'"; // // Create Ajax loading address by rout params var url = $@"""{option.LoadDataUrl}"""; // add rout params if (option.AjaxRoutParams.Any()) { url += "/?"; for (int i = 0; i < option.AjaxRoutParams.Count; i++) { var param = option.AjaxRoutParams[i]; url += $"{param.Key}={param.Value}&"; } } var totalAmount = (option.SubTitleFunc ?? "").ToLower().Equals("sum") ? @"+ sum(dataArr, 'y')" // calc sum of data : ""; highChart.AddJavascripVariable("ChartParentUrl", url) .AddJavascripFunction("FetchDataFunc", $@" $.get(ChartParentUrl, function (dataArr) {{ {option.Name}.series[0].setData(dataArr); var subTitleByTotal = '{option.SubTitle}' {totalAmount}; {option.Name}.setTitle(null, {{ text: subTitleByTotal }}); }}); ") .AddJavascripFunction("DrillDownFunc", $@" if (!e.seriesOptions) {{ var tChart = {option.Name}; tChart.showLoading('در حال بار گذاری داده ها'); $.get(e.point.drilldown_url + ""/"" + e.point.id, function (dataArr) {{ drilldownData = {{ name: e.point.name, id: e.point.id, data: dataArr }} ChartParentUrl = dataArr[0].drillup_url; tChart.hideLoading(); tChart.addSeriesAsDrilldown(e.point, drilldownData); var subTitleByTotal = '{option.SubTitle}' {totalAmount}; tChart.setTitle(null, {{ text: subTitleByTotal }}); }}); }} ", "e"); } highChart.InitChart(chart) .SetTitle(new Title { Text = option.Tilte }) .SetSubtitle(new Subtitle { Text = option.SubTitle }) .SetExporting(new Exporting { Enabled = true }) .SetPlotOptions(new PlotOptions { Column = new PlotOptionsColumn() { //Point = new PlotOptionsColumnPoint { Events = new PlotOptionsColumnPointEvents { Click = "ColumnPointClick" } }, Cursor = Cursors.Pointer, DataLabels = new PlotOptionsColumnDataLabels { //Style = "fontWeight: 'bold', fontFamily: 'B Nazanin'", Enabled = option.ShowDataLabels, Color = Color.AliceBlue, Formatter = "function() { return '<div style=\"color: black;\">' + this.y.toLocaleString('fa-IR'); + '</div>'; }" } } }) .SetXAxis(xa) .SetSeries(new Series { Type = option.ChartType, Name = option.SeriesName, Data = option.YAxisData ?? new Data(new object[0, 0]), PlotOptionsColumn = new PlotOptionsColumn() { ColorByPoint = option.ColorByPoint } }) .SetYAxis(new YAxis { Title = new YAxisTitle() { Text = option.YAxisTitle }, Labels = new YAxisLabels { Formatter = "function() { return '<div Locale=\"fa-IR\" style =\"color: black;\">'+ this.axis.defaultLabelFormatter.call(this) +'</div>'; }", Style = "color: '#89A54E'", Align = HorizontalAligns.Left, X = 3, Y = 16 }, ShowFirstLabel = false }) .SetTooltip(new Tooltip { //UseHTML = true, //HeaderFormat = "<small dir=\"rtl\">{point.key}</small><table dir =\"rtl\">", //PointFormat = "<tr><td style=\"color= {series.color}\"></td>" + // "<td><b>{point.y} ریال</b></td></tr>", //FooterFormat = "</table>", //ValueDecimals = 0, //Style = "fontWeight: 'normal', fontFamily: 'B Nazanin'" Crosshairs = new Crosshairs(true), Formatter = "TooltipFormatter" }) .AddJavascripFunction( "TooltipFormatter", @"var s = '<div dir=""rtl"">' + this.point.name +':<b> '+ this.y.toLocaleString('fa-IR') +' ریال</b><br/>'; return s;" ) .SetLegend(new Legend { Enabled = option.ShowLegend, Rtl = true, Align = HorizontalAligns.Left, VerticalAlign = VerticalAligns.Top, Y = 20, Floating = true, BorderWidth = 0 }) .SetOptions(new GlobalOptions() { Lang = new DotNet.Highcharts.Helpers.Lang() { //DrillUpText = "", Loading = "در حال بارگزاری", PrintButtonTitle = "چاپ", ThousandsSep = ",", DecimalPoint = ".", DownloadJPEG = "JPEG دانلود عکس", DownloadPDF = "PDF دانلود در قالب", DownloadPNG = "PNG دانلود عکس", DownloadSVG = "SGV دانلود فایل", ExportButtonTitle = "خروج" } }); return(highChart); }