SunnyUI 学习1.3——图表

1 简介

• UIBarChart
• UIBarChartEx
• UIDoughnutChat
• UILineChart
• UIPieChart

2 UIBarChart

• 柱状图，与Echart的用法类似
• 可以修改主题颜色
  • barChart.ChartStyleType = UIChartStyleType.Default;//默认颜色
  • barChart.ChartStyleType = UIChartStyleType.Plain; // Plain型
  • BarChart.ChartStyleType = UIChartStyleType.Dark; // 黑色
    
• 下面提供一个使用的案例
• 我们其实只关注以下几件事
  • 如何初始化？有哪些配置信息？
  • 如何动态更新？

using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace BarChartLearn
{
    public partial class Form1 : Form
    {
        private UIBarOption option;
        public Form1()
        {
            InitializeComponent();
            // 配置参数
            option = new UIBarOption();
            // 配置标题
            option.Title = new UITitle();
            // 主标题
            option.Title.Text = "SunnyUI";
            // 副标题
            option.Title.SubText = "BarChart";

            // 设置图例
            option.Legend = new UILegend();
            // 图例水平布局
            option.Legend.Orient = UIOrient.Horizontal;
            // 图例放置在左上角
            option.Legend.Top = UITopAlignment.Top;
            option.Legend.Left = UILeftAlignment.Left;
            // 两个图例分别是Bar1和Bar2
            option.Legend.AddData("Bar1");
            option.Legend.AddData("Bar2");

            // 设置系列
            UIBarSeries series = new UIBarSeries();
            // 第一系列Bar1
            series.Name = "Bar1";
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            option.Series.Add(series);

            // 设置第二系列Bar2
            series = new UIBarSeries();
            series.Name = "Bar2";
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            series.AddData(1.1);
            option.Series.Add(series);

            // 设置横坐标内容
            // 第一系列和第二系列的元素交织分布
            // 所以Mon是指第一和二系列的第一个元素的横坐标
            // Tue指第一和二系列的第二个元素的横坐标
            option.XAxis.Data.Add("Mon");
            option.XAxis.Data.Add("Tue");
            option.XAxis.Data.Add("Wed");
            option.XAxis.Data.Add("Thu");
            option.XAxis.Data.Add("Fri");

            // 辅助ToolTip是否可见
            option.ToolTip.Visible = true;
            // Y轴的刻度
            option.YAxis.Scale = true;
            // XY轴的单位
            option.XAxis.Name = "日期";
            option.YAxis.Name = "数值";
            // 标记处上下限（数值超过了也没事）
            option.YAxisScaleLines.Add(new UIScaleLine() { Color = Color.Red, Name = "上限", Value = 12 });
            option.YAxisScaleLines.Add(new UIScaleLine() { Color = Color.Gold, Name = "下限", Value = -20 });
            // 更新坐标轴
            BarChart.SetOption(option);
        }

        private void bt1_Click(object sender, EventArgs e)
        {
            
        }

        private void bt2_Click(object sender, EventArgs e)
        {
            // 更新数据
            UIBarSeries serie = option.Series[0];
            List<double> datasList = serie.Data;
            double[] datas = datasList.ToArray();
            serie.Clear();
            for (int i=0;i<datas.Length;i++)
            {
                datas[i] += (i+1)*1.1;
                // 没有提供直接修改的方法，所以要清空后，再将新的数据重新装入
                serie.AddData(datas[i]);
            }
            option.Series[0] = serie;
            // 更新
            BarChart.SetOption(option);
        }
    }
}

3 LineChart

• 画折线图
  • 可以修改主题颜色
  • lineChart.ChartStyleType = UIChartStyleType.Default;//默认颜色
  • lineChart.ChartStyleType = UIChartStyleType.Plain; // Plain型
  • lineChart.ChartStyleType = UIChartStyleType.Dark; // 黑色
    

using Sunny.UI;
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

namespace LineChartLearn
{
    public partial class Form1 : Form
    {
        private UILineOption option;
        public Form1()
        {
            InitializeComponent();

            // 配置LineChart
            option = new UILineOption();
            option.ToolTip.Visible = true;
            // 设置标题
            option.Title = new UITitle();
            option.Title.Text = "SunnyUI";
            option.Title.SubText = "LineChart";

            // 横坐标数据类型
            option.XAxisType = UIAxisType.Value;

            // 设置系列1
            var series = option.AddSeries(new UILineSeries("Line1"));
            float[] x = { 1, 2, 3, 4, 5, 6, 7 };
            float[] y = { 2, 4, 6, 8, 10, 12, 14 };
            for(int i=0;i<x.Length;i++)
            {
                series.Add(x[i], y[i]);
            }
            // 点的图标
            series.Symbol = UILinePointSymbol.Square;
            // 图标大小
            series.SymbolSize = 4;
            // 折线宽度
            series.SymbolLineWidth = 2;
            // 图标颜色
            series.SymbolColor = Color.Red;


            // 设置系列2
            series = option.AddSeries(new UILineSeries("Line2", Color.Lime));
            
            float[] x2 = { 1, 2, 3, 4, 5, 6, 7 };
            float[] y2 = { 3, 6, 9, 12, 15, 18, 21 };
            for (int i = 0; i < x.Length; i++)
            {
                series.Add(x2[i], y2[i]);
            }
            // 点的图标
            series.Symbol = UILinePointSymbol.Star;
            // 图标大小
            series.SymbolSize = 4;
            // 折线宽度
            series.SymbolLineWidth = 2;
            // 折线颜色
            series.SymbolColor = Color.Red;
            // 平滑曲线
            series.Smooth = true;

            // 设置纵坐标上限红线
            option.GreaterWarningArea = new UILineWarningArea(3.5);
            // 设置纵坐标下线黄线
            option.LessWarningArea = new UILineWarningArea(2.2, Color.Gold);
            option.YAxisScaleLines.Add(new UIScaleLine() { Color = Color.Red, Name = "上限", Value = 3.5 });
            option.YAxisScaleLines.Add(new UIScaleLine() { Color = Color.Gold, Name = "下限", Value = 2.2 });

            // 横坐标名称
            option.XAxis.Name = "事件";
            // 纵坐标名称
            option.YAxis.Name = "数值";
            option.XAxis.AxisLabel.DateTimeFormat = DateTimeEx.DateTimeFormat;
            // 设置竖向的红线
            option.XAxisScaleLines.Add(new UIScaleLine() { Color = Color.Red, Name = "x上界", Value = 50 });
            option.XAxisScaleLines.Add(new UIScaleLine() { Color = Color.Red, Name = "x下界", Value = -50 });
            // 更新配置
            LineChart.SetOption(option);
        }

        private void uiButton1_Click(object sender, EventArgs e)
        {
            // 更新数据
            // 注意，两个系列的长度不要差太多，否则会抛出内存溢出的异常
            UILineSeries serie = option.Series["Line1"];
            // 添加5个点
            for (int i=0;i<5;i++)
            {
                double newX = serie.XData[serie.XData.Count - 1] *1.5;
                double newY = serie.XData[serie.YData.Count - 1] * 1.5;
                serie.Add(newX, newY);
            }
            option.Series["Line1"] = serie;
            LineChart.SetOption(option);
        }
    }
}