C# webBrowser control calls echart

C# call Echart

Echart is very beautiful for data display, and the front-end call is very convenient. How to call for the ancient Winform?

Download Echart

Echart official website

After downloading: echarts.js and echarts.min.js

Introduced in html:

 <!-- 引入 ECharts 文件 -->
 <script src="echarts.min.js"></script>

Echart can be called afterwards, mainly for the option settings of Echart.

Echart Option main parameter description

parameter	Description
title	title
tooltip	Prompt the relevant data of the point according to the mouse movement
legend	Graphic style
xAxis，yAxis	Setting of display parameters such as x and y axis scale and naming
series	Displayed line type, point data, etc.

c# webBrowser call

Drag out a webbrower control and set:

//防止 WebBrowser 控件打开拖放到其上的文件。
  webBrowser1.AllowWebBrowserDrop = false
//防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
  webBrowser1.IsWebBrowserContextMenuEnabled = false;
//以防止 WebBrowser 控件响应快捷键。
  webBrowser1.WebBrowserShortcutsEnabled = false;         
//以防止 WebBrowser 控件显示脚本代码问题的错误信息。  
  webBrowser1.ScriptErrorsSuppressed = true;
//传递参数到js
  webBrowser1.ObjectForScripting = this;

Call the Html written in Echart:

  string path = System.AppDomain.CurrentDomain.BaseDirectory + "line-sections.html";  //html路径
  this.webBrowser1.Url = new Uri(path);  //传入路径到webBrowser

c# transfer parameters to JS

The following example is to modify the size of Echart according to the size of webBrowser1:

            string size_str = "[" + webBrowser1.Height.ToString() + "," +      webBrowser1.Width.ToString() + "]";
            HtmlDocument htmlDocument = webBrowser1.Document;
            object[] objArray = new object[] { size_str };
            htmlDocument.InvokeScript("setPosition", objArray);

Code in JS

 function setPosition(option) {
   var data_pri = eval(option);  //解析webBrowser1传入的数据
   var divMain = document.getElementById("main");  //获取html中id为main的echart控件
   divMain.style.height = data_pri[0] + "px";
   divMain.style.width = data_pri[1]+"px";
   window.onresize = myChart.resize(); //改变大小
  }

to sum up

Using echart to display data will add a lot of color to the interface, you can try it out, and the call is relatively simple.

picture display

Note: The default kernel of webBrowser is IE7. When the display effect is not good, you can change the kernel. The specific operation change code is as follows, and the test is valid.

   static void SetWebBrowserFeatures(int ieVersion)
        {
        // don't change the registry if running in-proc inside Visual Studio  
            if (LicenseManager.UsageMode != LicenseUsageMode.Runtime)
                return;
            //获取程序及名称  
            var appName = System.IO.Path.GetFileName(System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName);
            //得到浏览器的模式的值  
            UInt32 ieMode = GeoEmulationModee(ieVersion);
            var featureControlRegKey = @"HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\";
            //设置浏览器对应用程序（appName）以什么模式（ieMode）运行  
            Registry.SetValue(featureControlRegKey + "FEATURE_BROWSER_EMULATION",
                appName, ieMode, RegistryValueKind.DWord);
            // enable the features which are "On" for the full Internet Explorer browser  
            //不晓得设置有什么用  
            Registry.SetValue(featureControlRegKey + "FEATURE_ENABLE_CLIPCHILDREN_OPTIMIZATION",
                appName, 1, RegistryValueKind.DWord);
        }

     /// <summary>  
        /// 通过版本得到浏览器模式的值  
        /// </summary>  
        /// <param name="browserVersion"></param>  
        /// <returns></returns>  
        static UInt32 GeoEmulationModee(int browserVersion)
        {
            UInt32 mode = 11000; // Internet Explorer 11. Webpages containing standards-based !DOCTYPE directives are displayed in IE11 Standards mode.   
            switch (browserVersion)
            {
                case 7:
                    mode = 7000; // Webpages containing standards-based !DOCTYPE directives are displayed in IE7 Standards mode.   
                    break;
                case 8:
                    mode = 8000; // Webpages containing standards-based !DOCTYPE directives are displayed in IE8 mode.   
                    break;
                case 9:
                    mode = 9000; // Internet Explorer 9. Webpages containing standards-based !DOCTYPE directives are displayed in IE9 mode.                      
                    break;
                case 10:
                    mode = 10000; // Internet Explorer 10.  
                    break;
                case 11:
                    mode = 11000; // Internet Explorer 11  
                    break;
            }
            return mode;
        }
  //调用
   SetWebBrowserFeatures(10);

DEMO acquisition

Follow the public account to send echarts