SunnyUI 学习1.3——图表

炎黄子孙__ 2021-01-01 16:59:19 635 收藏 8

分类专栏： SunnyUI C# winform 文章标签：可视化 c# winform

版权

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);

option.Series.Add(series);

// 设置第二系列Bar2

series = new UIBarSeries();

series.Name = "Bar2";

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);

}

————————————————

原文链接：https://blog.csdn.net/qq_43851684/article/details/112061124

SunnyUI 学习1.3——图表

相关推荐