按鈕點擊增加條形圖值

Question

我想創建一個圖表，顯示鍛鍊的進度。每五個按鈕點擊一個勾號應添加到圖表。這是它應該看起來的一個例子。

1 http://img22.imageshack.us/img22/7633/clickgraph.png

出於演示的目的，我使用點擊一個按鈕，在生產上的點擊將是一個輪的每二十圈。

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

在此先感謝

Answer 1

您可以使用一個Bitmap Buffer或panel借鑑。這裏是一個headstart：只是一個樣本。 reference。

此解決方案基於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)) 

     } 
    } 

}