C# Chart control markup problem

Work together to create and grow together! This is the 17th day of my participation in the "Nuggets Daily New Plan·August Update Challenge", click to view the event details

Foreword:

When I was working on the project, I encountered a requirement that I needed to mark the data on the Chart icon to realize data visualization. Because our table hides the scale of the Y-axis, we cannot see the data value, so we use the form of data marking to Dynamic display value, then how should we deal with this problem, read this article, let’s learn together, creation is not easy, everyone likes, pays attention to comments and collections, your likes and attention are the driving force for my creation, and it is also me The drive to keep learning. Thank you all! ! !

12354689123110.gif

Show results:

Let's first show our effect, see what's going on, and see if there is any desire to read the article below, mainly to deal with the problem of marking the Chart diagram, we used a Point-to-Point feature of the Chart control. Set the mark to realize this dynamic display of the Chart graph. The effect of the two graphs is very obvious. For projects we have such needs, we can use this form, or use another mouse click to pop up a prompt. The next article should be Write it out and learn it together with everyone. If you like it more, I will be more motivated to create.

image.png

image.png

Solution:

Let's take a look at the solution. I use the MarkerStyle of the Point in the Chart control to mark it. To achieve this, I set the mark size, mark color, and mark display value for the MarkerStyle style, using the data generated by the random function. , the generated table, add the data of the table, and then mark this point, only mark the latest is to use the method of marking one to one, that is, I mark the latest, remove the mark of the previous one, which button I only give A status value is set to let it determine whether it is the latest or always marked, or a status can be added without marking. The code is posted later, and you can update it yourself later.

image.png

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

namespace TestIC00
{
    public partial class Form2 : Form
    {
        public Form2()
        {
            InitializeComponent();
        }

        private void Form2_Load(object sender, EventArgs e)
        {

        }
        public int index = 0;
        public bool flag = false;
        private void button1_Click(object sender, EventArgs e)
        {
            timer1.Enabled = !timer1.Enabled;//对定时器的操作,点击打开或关闭定时器,主要是实现一秒传一个值
        }
        private void timer1_Tick(object sender, EventArgs e)
        {
            Random random = new Random();
            this.chart1.ChartAreas[0].AxisX.MajorGrid.Interval = 1;//网格间隔
            this.chart1.ChartAreas[0].AxisX.MinorGrid.Interval = 1;
            this.chart1.ChartAreas[0].AxisY.MajorGrid.Interval = 1;//网格间隔
            this.chart1.ChartAreas[0].AxisY.MinorGrid.Interval = 1;
            this.chart1.ChartAreas[0].AxisX.LabelStyle.Interval = 1;//设置X轴的值的间隔大小
            this.chart1.ChartAreas[0].AxisX.MajorGrid.LineColor = Color.Gray;//设置X轴网格线颜色
            this.chart1.ChartAreas[0].AxisY.MajorGrid.LineColor = Color.Gray;//设置Y轴网格线颜色
            chart1.ChartAreas[0].AxisX.ScrollBar.Enabled = true;//启动滚动条
            this.chart1.ChartAreas[0].AxisY.LabelStyle.Enabled = false;//使Y轴的刻度隐藏
            chart1.ChartAreas[0].AxisX.ScaleView.Scroll(System.Windows.Forms.DataVisualization.Charting.ScrollType.Last);//启用视图实现数据滚动
            int value = random.Next(0, 20);//产生随机数进行赋值
            chart1.Series[0].Points.AddY(value);//对折线图添加数据
            if(flag)//判断标记,如果是true表示只标记最新,需要去掉前面的一个值
            {
                this.chart1.Series[0].Points[index].MarkerStyle = MarkerStyle.Circle;//设置标记的形状为圆形
                this.chart1.Series[0].Points[index].MarkerColor = Color.Red;//形状颜色设置
                this.chart1.Series[0].Points[index].MarkerBorderWidth = 3;//形状大小设置
                this.chart1.Series[0].Points[index].MarkerSize = 10;//设置我们展示标记的大小
                this.chart1.Series[0].Points[index].Label = "功能:" + this.chart1.Series[0].Name + "\r\n" + "值:" + value.ToString();//对标记展示的值
                this.chart1.Series[0].Points[index].IsValueShownAsLabel = true;//展示标记
                this.chart1.Series[0].Points[index-1].MarkerBorderWidth = 0;//改前一个标记的大小
                this.chart1.Series[0].Points[index - 1].MarkerSize = 0;//形状大小
                this.chart1.Series[0].Points[index - 1].Label = "";//展示数据
                this.chart1.Series[0].Points[index - 1].IsValueShownAsLabel = false;//不展示
            }
            else//对数据一直标记
            {
                this.chart1.Series[0].Points[index].MarkerStyle = MarkerStyle.Circle;
                this.chart1.Series[0].Points[index].MarkerColor = Color.Red;
                this.chart1.Series[0].Points[index].MarkerBorderWidth = 3;
                this.chart1.Series[0].Points[index].MarkerSize = 10;
                this.chart1.Series[0].Points[index].Label = "功能:" + this.chart1.Series[0].Name + "\r\n" + "值:" + value.ToString();
                this.chart1.Series[0].Points[index].IsValueShownAsLabel = true;
            }
           //也可以加一种状态是什么也不标记,你们自己对那个状态值的处理就可以啦
            index++;
        }

        private void button2_Click(object sender, EventArgs e)//只标记最新按钮
        {
            flag = !flag;//对状态值的改变,我就使用了两种状态,你们可以改
        }
    }
}

复制代码

Summarize:

This article is mainly a simple solution to a problem I encountered. Although it is very simple, it is still technical. There are too many problems in C#, but too few people to solve them. We must know how to share. , and there are too few people who have posted articles, so I will post some solutions to the problems I encountered, and let everyone give me some pointers, and let’s learn together. Of course, there are other methods. The other method is to use the mouse Click to show, interested students can read my next article, it is not easy to create, like, follow, comment and collect, thank you, we will make progress together. Hit the Q! ! !

520520.gif

Guess you like

Origin juejin.im/post/7132818750155259912