目录
一、前言
使用C#语言,在搭建客户端时,使用自带的Chart 控件生成折线图。
二、效果图



三、窗体设计
在窗体拖拽一个Chart控件和生成折线图button按钮,点击"生成折线图"按钮后,生成折线图

四、数据库结构
注意:日期字段类型是TEXT,存储的是YYYY-MM-DD HH:MM:SS格式。


五、折线图示例代码
在代码顶部引入using System.Windows.Forms.DataVisualization.Charting;
cs
private void button1_Click(object sender, EventArgs e)
{
// ---------- 1.初始化图表 -------------
// 清空默认的图表区域和序列
chart1.ChartAreas.Clear();
chart1.Series.Clear();
chart1.Legends.Clear();
// ---------- 2.设置图表区域 ----------
ChartArea area = new ChartArea("MainArea");
//x轴设置
area.AxisX.Title = "日期";
area.AxisX.MajorGrid.LineColor = Color.LightGray; // 纵向网格线
area.AxisX.LabelStyle.Format = "MM-dd"; // 日期格式
area.AxisX.Interval = 1; // 强制显示所有X轴标签
//y轴设置
area.AxisY.Title = "数量";
area.AxisY.MajorGrid.LineColor = Color.LightGray; // 纵向网格线
area.AxisY.Minimum = 0; // y轴最小值
chart1.ChartAreas.Add(area);
// 设置图例
Legend legend = new Legend("Legend1");
legend.Docking = Docking.Top; // 图例显示在上方
legend.Alignment = StringAlignment.Center; // 居中显示
chart1.Legends.Add(legend);
// ---------- 3.准备数据 ----------
string sql = "SELECT strftime('%Y-%m-%d', create_time) AS date, COUNT(*) AS count FROM user GROUP BY strftime('%Y-%m-%d', create_time) ORDER BY date ASC";
DataTable dt = SqliteHelper.ExecuteDataTable(sql);
if (dt.Rows.Count == 0)
{
MessageBox.Show("没有查到数据!", "提示");
return;
}
// 4.绑定数据到图表
// 创建数据序列
Series series = new Series("每日新增");
// 设置样式
series.ChartType = SeriesChartType.Spline; // 设置为折线图
series.IsValueShownAsLabel = true; // 开启数据点标签显示,并显示Y轴的值
series.LabelFormat = "# 条"; // 数值格式
series.BorderWidth = 3; // 线条宽度
series.Color = Color.DodgerBlue; // 线条颜色
// 数据点样式(圆点)
series.MarkerStyle = MarkerStyle.Circle; //数据点形状
series.MarkerSize = 8; // 数据点大小
series.MarkerColor = Color.DodgerBlue; //数据点颜色
// 绑定数据源
series.Points.DataBind(dt.AsEnumerable(), "date", "count", "");
// 把序列加到图表里
chart1.Series.Add(series);
}
图表的属性可以根据自己需求去修改。
六、柱状图示例代码
柱状图的窗体设计和折线图一样,点击"生成"按钮,下面生成柱状图。
cs
private void createBar_Click(object sender, EventArgs e)
{
// ---------- 1.初始化图表 -------------
// 清空默认的图表区域和序列
chart1.ChartAreas.Clear();
chart1.Series.Clear();
chart1.Legends.Clear();
// ---------- 2.设置图表区域 ----------
ChartArea area = new ChartArea("MainArea");
//x轴设置
area.AxisX.Title = "日期";
area.AxisX.MajorGrid.LineColor = Color.LightGray; // 纵向网格线
area.AxisX.LabelStyle.Format = "MM-dd"; // 日期格式
area.AxisX.Interval = 1; // 强制显示所有X轴标签
//y轴设置
area.AxisY.Title = "数量";
area.AxisY.MajorGrid.LineColor = Color.LightGray; // 纵向网格线
area.AxisY.Minimum = 0; // y轴最小值
area.AxisX.LabelStyle.Angle = -45; // 如果日期太长,倾斜45度显示,防止重叠
chart1.ChartAreas.Add(area);
// ---------- 3.设置图例 ----------
Legend legend = new Legend("Legend1");
legend.Docking = Docking.Top; // 图例显示在上方
legend.Alignment = StringAlignment.Center; // 居中显示
chart1.Legends.Add(legend);
// ---------- 4.准备数据 ----------
string sql = "SELECT strftime('%Y-%m-%d', create_time) AS date, COUNT(*) AS count FROM user GROUP BY strftime('%Y-%m-%d', create_time) ORDER BY date ASC";
DataTable dt = SqliteHelper.ExecuteDataTable(sql);
if (dt.Rows.Count == 0) {
MessageBox.Show("没有查到数据!", "提示");
return;
}
// 5.绑定数据到图表
// 创建数据序列
Series series = new Series("每日新增");
// 设置样式
series.ChartType = SeriesChartType.Column; // 设置为柱状图
series.IsValueShownAsLabel = true; // 开启标签显示,并显示Y轴的值
series.LabelFormat = "# 个"; // 数值格式
series.Color = Color.DodgerBlue; // 颜色
series["PointWidth"] = "0.6"; // 柱子宽度占可用空间的60%,避免挤在一起
// 绑定数据源
series.Points.DataBind(dt.AsEnumerable(), "date", "count", "");
// 把序列加到图表里
chart1.Series.Add(series);
}
七、饼状图示例代码
饼状图的窗体设计和折线图一样,点击"生成"按钮,下面生成柱状图。
cs
private void createPie_Click(object sender, EventArgs e)
{
// ---------- 1.初始化图表 -------------
// 清空默认的图表区域和序列
chart1.ChartAreas.Clear();
chart1.Series.Clear();
chart1.Legends.Clear();
// ---------- 2.设置图表区域 ----------
ChartArea area = new ChartArea("MainArea");
chart1.ChartAreas.Add(area);
// ---------- 3.设置图例 ----------
Legend legend = new Legend("Legend1");
legend.Docking = Docking.Right; // 图例显示在右侧
legend.Alignment = StringAlignment.Center; // 居中显示
chart1.Legends.Add(legend);
// ---------- 4.准备数据 ----------
string sql = "SELECT CASE status WHEN 1 THEN '开启' WHEN 2 THEN '关闭' ELSE '未知' END AS status_text, COUNT(*) AS count FROM user GROUP BY status";
DataTable dt = SqliteHelper.ExecuteDataTable(sql);
if (dt.Rows.Count == 0)
{
MessageBox.Show("没有查到数据!", "提示");
return;
}
// 5.绑定数据到图表
// 创建数据序列
Series series = new Series("状态占比");
// 设置样式
series.ChartType = SeriesChartType.Pie; // 设置为饼状图
series.Label = "#VALX:#PERCENT{P1}"; // 名称:百分比。#VALX:显示X轴的文字,#VAL:显示原始数值,{P1}:保留1位小数的百分比,如45.5%
series.IsValueShownAsLabel = true; // 开启标签显示,并显示Y轴的值
//series.Palette = ChartColorPalette.Pastel; // 设置不同扇形颜色
series["Exploded"] = "true"; // 让饼图稍微分离
// 绑定数据源
series.Points.DataBind(dt.AsEnumerable(), "status_text", "count", "");
// 把序列加到图表里
chart1.Series.Add(series);
}