c# - 通过单击按钮增加条形图值

Question

我正在尝试创建一个显示锻炼进度的图表。每五个按钮点击一个勾号应该添加到图表中。这是一个外观示例。

出于演示目的，我使用了按钮点击，在生产中，点击将是每二十转轮子。

    private int counter = 0;
    private void button1_Click(object sender, EventArgs e)
    {
        counter++;
        // code will go here
    }

提前致谢

Answer 1

您可以使用 aBitmap Buffer或 apanel来绘制。这是一个先机：只是一个示例。 参考。

该解决方案基于WinForms& Panel_Paint()。您可以尝试添加垂直进度标签和图表的 Y 轴值标签。

代码：

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 WindowsFormsApplication1
{
    public partial class Form1 : Form
    {
        public Form1(){
            InitializeComponent();
        }

        private int counter = 0;
        private int px = 10;
        private int py = 180;
        private int total5Clicks = 0;

        private void button1_Click(object sender, EventArgs e)
        {
            counter++;
            label1.Text = "Total Clicks = " + counter.ToString();
            if (Math.Abs(counter % 5) == 0){
                if (Math.Abs(counter / 5) > 0){
                    total5Clicks = total5Clicks + 1;
                    PaintOnChartPanel(total5Clicks);}
             }
         }

      private void panel1_Paint(object sender, PaintEventArgs e){           
      }

      private void PaintOnChartPanel(int total5Times)
      {            
        //Add a new Panel Paint EventHandler
        panel1.Paint += new PaintEventHandler(panel1_Paint);

        using (Graphics g = this.panel1.CreateGraphics())
        {
            Brush brush = new SolidBrush(Color.Green);
            g.FillRectangle(brush, px, py, 20, 20);                           
            Pen pen = new Pen(new SolidBrush(Color.White));
            g.DrawRectangle(pen, px, py, 20, 20);                    

            //add each total5Click into chart block
            g.DrawString((total5Times).ToString(), new Font("Arial", 7), 
            new SolidBrush(Color.AntiqueWhite),
            px + 1, py+8, StringFormat.GenericDefault);
            pen.Dispose();}

            if (py > 20){
                py = py - 20;}
            else{
                MessageBox.Show("Reached Top of the Panel");
                if (px < 200){
                    px = px + 20;
                    py = 180;}
                else{
                    MessageBox.Show("Reached Right of the Panel");
                }
            }
        }
    }
}

输出形式：

Answer 2

您可以确定是否有五的倍数

bool drawTickMark = clicks % 5 == 0;

%是返回整数除法余数的模运算符。例如13 % 5 = 3，13 / 5 = 2因为2 * 5 + 3 = 13。

clicks % 5将为零clicks = 0, 5, 10, 15, ...

Answer 3

我不是一个 ASP.NET 人，但这里有一个算法可以用来绘制正方形

        int perColumn = Height / squareSize;
        int totalColumns = (squareCount / perColumn) + 1;

        for (int y = 0; y <= totalColumns - 1; y++)
        {
            int itemCount = squareCount - (y * perColumn);
            if (itemCount > perColumn)
                itemCount = perColumn;

            for (int x = 0; x <= itemCount - 1; x++)
                e.Graphics.FillRectangle(RandomBrush, New Rectangle((column * SquareSize) + 3, (i * SquareSize) + 3, SquareSize - 2, SquareSize - 2))

public sealed class ClickGraph : Control
{
    private int squareCount = 1;
    public int SquareCount
    {
        get
        {
            return squareCount;
        }
        set
        {
            squareCount = value;
            Invalidate();
        }
    }

    private int squareSize = 25;
    public int SquareSize
    {
        get
        {
            return squareSize;
        }
        set
        {
            squareSize = value;
            Invalidate();
        }
    }

    public ClickGraph()
    {
        SetStyle(ControlStyles.ResizeRedraw, true);
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.Clear(BackColor);

        int perColumn = Height / squareSize;
        int totalColumns = (squareCount / perColumn) + 1;

        for (int y = 0; y <= totalColumns - 1; y++)
        {
            int itemCount = squareCount - (y * perColumn);
            if (itemCount > perColumn)
                itemCount = perColumn;

            for (int x = 0; x <= itemCount - 1; x++)
                e.Graphics.FillRectangle(RandomBrush, New Rectangle((column * SquareSize) + 3, (i * SquareSize) + 3, SquareSize - 2, SquareSize - 2))

        }
    }

}