C#类似仪表盘数据显示的制作

项目demo下载点我

1.效果图:
在这里插入图片描述

2.思路:
底层其实是一个环形图chart控件,设置环形图内径大小。
整个环形图只有三个模块,其中一个模块设置与背景颜色相同,所以成了有小半个缺口的圆环假象。
剩下的两个模块一个用于显示数据进度,另一个给一个默认颜色。最后三个模块组合就成了仪表盘了。。

3.核心代码:

/// <summary>
/// </summary>
/// <param name="_Chart"></param>
/// <param name="chartColor">根据预警类型展示的颜色</param>
/// <param name="control">存储监测值的skinLabel控件</param>
/// <param name="monitorValue">监测值</param>
/// <param name="maxMonitorValue">预警监测最大值</param>
public void ChartMethod(Chart _Chart, Color chartColor, Control control, double monitorValue, double maxMonitorValue)
{
    // 存储监测值的skinLabel也要修改颜色
    control.ForeColor = chartColor;
    control.Text = monitorValue + "";

    double idxAY = 70;
    double idxBY = 0;
    if ((maxMonitorValue - monitorValue) > 0)
    {
        // 等比例转换所占份额大小
        idxAY = (double)((monitorValue / maxMonitorValue) * 70.00);
        idxBY = (double)(70.00 - idxAY);
    }

    //清空chart图表
    _Chart.Series["Series1"].Points.Clear();

    // 隐藏的区域
    int idx = _Chart.Series["Series1"].Points.AddY(30);
    DataPoint point = _Chart.Series["Series1"].Points[idx];
    point.Color = _Chart.BackColor;

    // 显示的值所占比例的区域
    int idxA = _Chart.Series["Series1"].Points.AddY(idxAY);
    DataPoint pointA = _Chart.Series["Series1"].Points[idxA];
    pointA.Color = chartColor;

    // 显示的非值部分所占比例的区域
    int idxB = _Chart.Series["Series1"].Points.AddY(idxBY);
    DataPoint pointB = _Chart.Series["Series1"].Points[idxB];
    pointB.Color = Color.FromArgb(4, 83, 124);
}

private void Form1_Load(object sender, EventArgs e)
{
    ChartMethod(chart6, Color.FromArgb(2, 209, 242), skinLabel39, 95.6, 120);
    ChartMethod(chart7, Color.FromArgb(2, 209, 242), skinLabel42, 39, 120);
    ChartMethod(chart8, Color.FromArgb(207, 166, 14), skinLabel45, 6.7, 15);
    ChartMethod(chart9, Color.FromArgb(2, 209, 242), skinLabel48, 68.7, 120);
    ChartMethod(chart10, Color.FromArgb(233, 81, 88), skinLabel51, 7, 12);
    ChartMethod(chart11, Color.FromArgb(2, 209, 242), skinLabel54, 73, 120);
}

4.设置环形图角度:
在这里插入图片描述
5.设置环形图内径大小:
在这里插入图片描述

  • 3
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

哎呦喂O_o嗨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值