C#在winform平台构建堆叠柱状图

2019-12-30 本文已影响0人 GoodTekken

前言

之前在网上找了很多关于状态图的资料，但是很少是在winform上实现的。其实堆叠柱状图是来自于PPT的一种数据统计方式，展示给用户直观的图片印象。而C#很多时候要展现比较精美的界面都采用WPF来实现，像winform的技术一直没有更新，控件中只有老旧的chart控件，很难实现我们的需求，因此在winform平台上要实现堆叠柱状图需要引入第三方插件，调用的是百度开源的echart。
echart官网：
https://www.echartsjs.com/examples/zh/index.html

准备

1，首先在bin文件夹中下载添加echarts.js和echarts.min.js文件，echarts.min.js是需要自己在官网定制的。可以参考：https://blog.csdn.net/weixin_42528089/article/details/95487734
2，在winform窗口添加WebBrowser控件，属性Dock可以选在Fill填充整个窗口，我选择的是None可以自定义拉伸尺寸。下面是界面展示：

主界面.png

3，开始添加各功能模块的内容：

  using System;
  using System.Collections.Generic;
  using System.ComponentModel;
  using System.Data;
  using System.Drawing;
  using System.IO;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Windows.Forms;

  namespace MyEchart
  {
      //设置Com对外可访问
      [System.Runtime.InteropServices.ComVisible(true)]
      public partial class Form1 : Form
      {
  
          /// <summary>
          /// 根目录
          /// </summary>
          string str = System.Environment.CurrentDirectory;

          public Form1()
          {
              InitializeComponent();
              //初始化浏览器
              this.initWebBrowser();
              //加载 文件
              this.getAllHtmlFile();
          }

          private void button1_Click(object sender, EventArgs e)
          {
              HTML.AddHtml("index1");
          }

          private void Form1_FormClosing(object sender, FormClosingEventArgs e)
          {
              this.webBrowser1.Dispose();
          }

          private void comboBox1_SelectedIndexChanged(object sender, EventArgs e)
          {
              this.webBrowser1.Url = new Uri(str + "\\" + comboBox1.Text.Trim());
          }

          private void button2_Click(object sender, EventArgs e)
          {
              comboBox1.Items.Clear();
              this.getAllHtmlFile();
          }
          /// <summary>
          /// 刷新
          /// </summary>
          /// <param name="sender"></param>
          /// <param name="e"></param>
          private void button3_Click(object sender, EventArgs e)
          {
              this.webBrowser1.Refresh();
          }

          /// <summary>
          /// 获取html文件
          /// </summary>
          private void getAllHtmlFile()
          {
              //获取指定文件夹的所有文件
              string[] paths = Directory.GetFiles(str);
              foreach (var item in paths)
              {
                  //获取文件后缀名
                  string extension = Path.GetExtension(item).ToLower();
                  if (extension == ".html")
                  {
                      comboBox1.Items.Add(Path.GetFileName(item));
                  }
              }

              if (comboBox1.Items.Count > 0)
              {
                  comboBox1.SelectedIndex = 0;
                  this.webBrowser1.Url = new Uri(str + "\\" + comboBox1.Text.Trim());
              }
          }

          private void Form1_Load(object sender, EventArgs e)
          {
              //浏览器url 取到index.html页面
              //this.webBrowser1.Url = new Uri(str + "\\index.html");
              //if (comboBox1.Items.Count > 0)
              //{
              //    comboBox1.SelectedIndex = 0;
              //    this.webBrowser1.Url = new Uri(str +"\\"+ comboBox1.Text.Trim());
              //}
          }

          /// <summary>
          /// 初始化浏览器
          /// </summary>
          private void initWebBrowser()
          {
              //防止 WebBrowser 控件打开拖放到其上的文件。
              webBrowser1.AllowWebBrowserDrop = false;

              //防止 WebBrowser 控件在用户右击它时显示其快捷菜单.
              webBrowser1.IsWebBrowserContextMenuEnabled = false;

              //以防止 WebBrowser 控件响应快捷键。
              webBrowser1.WebBrowserShortcutsEnabled = false;

              //以防止 WebBrowser 控件显示脚本代码问题的错误信息。
              webBrowser1.ScriptErrorsSuppressed = true;

              //（这个属性比较重要，可以通过这个属性，把WINFROM中的变量，传递到JS中，供内嵌的网页使用；但设置到的类型必须是COM可见的，所以要设置     [System.Runtime.InteropServices.ComVisibleAttribute(true)]，因为我的值设置为this,所以这个特性要加载窗体类上）
              webBrowser1.ObjectForScripting = this;
          }
      }
  }

同时，为了可以添加HTML文件和修改HTML,增加HTML.cs文件，源代码如下：

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Text;

    namespace MyEchart
    {
        public struct HTML
        {
            public static void EditHtml(string fileName)
            {
                Stream myStream = new FileStream(fileName, FileMode.Open);
                //Encoding encode = System.Text.Encoding.GetEncoding("GB2312");
                Encoding encode = System.Text.Encoding.GetEncoding("UTF-8");
                StreamReader myStreamReader = new StreamReader(myStream, encode);
                string strhtml = myStreamReader.ReadToEnd();
                //string stroutput = strhtml.Replace("&*平均温度*&", "要替换的内容平均温度");
                string stroutput = strhtml.Replace("123", "123456");
                myStream.Seek(0, SeekOrigin.Begin);
                myStream.SetLength(0);


                StreamWriter sw = new StreamWriter(myStream, encode);
                sw.Write(stroutput);
                sw.Flush();
                sw.Close();
                myStream.Close();
            }

            public static void AddHtml(string path)
            {
                try
                {
                    string fileName = path + ".html";
                    if (File.Exists(fileName))
                    {
                        File.Delete(fileName);
                    }

                    using (StreamWriter sw = new StreamWriter(fileName, false))
                    {
                        //sw.WriteLine("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
                        //sw.WriteLine("<html xmlns=\"http://www.w3.org/1999/xhtml\">");
                        //sw.WriteLine("<head>");
                        //sw.WriteLine("<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />");
                        //sw.WriteLine("<title> </title>");
                        //sw.WriteLine("</head>");
                        //sw.WriteLine("<body>");
                        //sw.WriteLine("<img src=" + path + ">");
                        //sw.WriteLine("</body>");
                        //sw.WriteLine("</html>");

                        sw.WriteLine("<!DOCTYPE html>");
                        sw.WriteLine("<html>");
                        sw.WriteLine("<head>");
                        sw.WriteLine("    <meta charset=\"utf-8\">");
                        sw.WriteLine("    <title>ECharts</title>");
                        sw.WriteLine("    <!-- 引入 echarts.js -->");
                        sw.WriteLine("    <script src=\"echarts.js\"></script>");
                        sw.WriteLine("</head>");
                        sw.WriteLine("<body>");
                        sw.WriteLine("    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->");
                        sw.WriteLine("    <div id=\"main\" style=\"width: 1132px;height:516px;\"></div>");
                        sw.WriteLine("    <script type=\"text/javascript\">");
                        sw.WriteLine("        // 基于准备好的dom，初始化echarts实例");
                        sw.WriteLine("        var myChart = echarts.init(document.getElementById('main'));");
                        sw.WriteLine("");
                        sw.WriteLine("");
                        sw.WriteLine("        option = {");
                        sw.WriteLine("    tooltip: {");
                        sw.WriteLine("        trigger: 'axis',");
                        sw.WriteLine("        axisPointer: {");
                        sw.WriteLine("            type: 'cross',");
                        sw.WriteLine("            crossStyle: {");
                        sw.WriteLine("                color: '#999'");
                        sw.WriteLine("            }");
                        sw.WriteLine("        }");
                        sw.WriteLine("    },");
                        sw.WriteLine("    toolbox: {");
                        sw.WriteLine("        feature: {");
                        sw.WriteLine("            dataView: {show: true, readOnly: false},");
                        sw.WriteLine("            magicType: {show: true, type: ['line', 'bar']},");
                        sw.WriteLine("            restore: {show: true},");
                        sw.WriteLine("            saveAsImage: {show: true}");
                        sw.WriteLine("        }");
                        sw.WriteLine("    },");
                        sw.WriteLine("    legend: {");
                        sw.WriteLine("        data:['蒸发量','降水量', '1']");
                        sw.WriteLine("    },");
                        sw.WriteLine("    xAxis: [");
                        sw.WriteLine("        {");
                        sw.WriteLine("            type: 'category',");
                        sw.WriteLine("            data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],");
                        sw.WriteLine("            axisPointer: {");
                        sw.WriteLine("                type: 'shadow'");
                        sw.WriteLine("            }");
                        sw.WriteLine("        }");
                        sw.WriteLine("    ],");
                        sw.WriteLine("    yAxis: [");
                        sw.WriteLine("        {");
                        sw.WriteLine("            type: 'value',");
                        sw.WriteLine("            name: '水量',");
                        sw.WriteLine("            min: 0,");
                        sw.WriteLine("            max: 250,");
                        sw.WriteLine("            interval: 50,");
                        sw.WriteLine("            axisLabel: {");
                        sw.WriteLine("                formatter: '{value} ml'");
                        sw.WriteLine("            }");
                        sw.WriteLine("        },");
                        sw.WriteLine("        {");
                        sw.WriteLine("            type: 'value',");
                        sw.WriteLine("            name: '温度',");
                        sw.WriteLine("            min: 0,");
                        sw.WriteLine("            max: 25,");
                        sw.WriteLine("            interval: 5,");
                        sw.WriteLine("            axisLabel: {");
                        sw.WriteLine("                formatter: '{value} °C'");
                        sw.WriteLine("            }");
                        sw.WriteLine("        }");
                        sw.WriteLine("    ],");
                        sw.WriteLine("    series: [");
                        sw.WriteLine("        {");
                        sw.WriteLine("            name:'蒸发量',");
                        sw.WriteLine("            type:'bar',");
                        sw.WriteLine("            stack:'堆叠',//堆叠柱状图在此设置成统一名称即可");
                        sw.WriteLine("            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]");
                        sw.WriteLine("        },");
                        sw.WriteLine("        {");
                        sw.WriteLine("            name:'降水量',");
                        sw.WriteLine("            type:'bar',");
                        sw.WriteLine("            stack:'堆叠',//堆叠柱状图在此设置成统一名称即可");
                        sw.WriteLine("            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]");
                        sw.WriteLine("        },");
                        sw.WriteLine("        {");
                        sw.WriteLine("            name:'1',");
                        sw.WriteLine("            type:'line',");
                        sw.WriteLine("            yAxisIndex: 1,");
                        sw.WriteLine("            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]");
                        sw.WriteLine("        }");
                        sw.WriteLine("    ]");
                        sw.WriteLine("};");
                        sw.WriteLine("");
                        sw.WriteLine("        // 使用刚指定的配置项和数据显示图表。");
                        sw.WriteLine("        myChart.setOption(option);");
                        sw.WriteLine("    </script>");
                        sw.WriteLine("</body>");
                        sw.WriteLine("</html>");
                        sw.Close();
                    }
                }
                catch(ArithmeticException ex)
                {
                    Console.WriteLine(ex);
                }
            }
        }
    }

以上是构建的所有源代码，欢迎交流。

///////////////////////我是分割线*///////////////////////////
(2019年12月30日补充)

当然啦，我们看到的官网HTML文件是开源的，我们要想拿过来直接用,就要自己制作HTML文件了。

散点图.png
将左侧的源代码放进debug文件夹的准备生成的文件.txt中，使用以下代码转换便可得到HTML文件了。

        public static void MakOptionFile(string path)
        {
            //获取应用程序的当前工作目录
            string filepath = System.IO.Directory.GetCurrentDirectory();
            try
            {
                string fileName = path + ".txt";
                if (File.Exists(fileName))
                {
                    File.Delete(fileName);
                }
                using (StreamWriter sw = new StreamWriter(fileName, false))
                {
                    string[] strs = File.ReadAllLines(filepath+ @"\准备生成的文件.txt", System.Text.Encoding.GetEncoding("gb2312"));

                    foreach(string strTemp in strs)
                    {
                        sw.WriteLine("sw.WriteLine(\""+ strTemp + "\");");
                    }
                    sw.Close();
                }
            }
            catch (ArithmeticException ex)
            {
                Console.WriteLine(ex);
            }
        }

通过以上步骤，便可在winform平台创建堆叠柱状图了，按照惯例，在文章末尾贴上一张效果图吧。^ - ^

效果图.png

C#在winform平台构建堆叠柱状图

猜你喜欢

热点阅读