Exemplo n.º 1
0
 public static MvcHtmlString GetHighChart(this HtmlHelper htmlHelper, ChartOption option)
 {
     return(new MvcHtmlString(GetHighChart(option).ToHtmlString()));
 }
Exemplo n.º 2
0
        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);
        }