Làm thế nào tôi có thể vẽ một biểu đồ đẹp như ứng dụng HTC 'Stocks'

Question

Với HTC Mozart của tôi, tôi đã tải xuống một ứng dụng gọi là 'Cổ phiếu' về cơ bản trông sau cổ phiếu (nasdaq v.v ...).

Biểu đồ/biểu đồ trông rất đẹp và tôi tự hỏi làm cách nào để tôi có thể làm điều tương tự. Dưới đây là một hình ảnh của đồ thị:

Tôi thấy 3 màu: - trên đường cong (nền) - đường cong tự - bên dưới đường cong

Có bất kỳ miễn phí/mở tài nguyên có thể giúp tôi vẽ đồ thị như thế này? Mọi bài đăng hoặc liên kết trên blog đều được chào đón!

Answer 1

Bạn có thể sử dụng các điều khiển Biểu đồ từ Bộ công cụ Silverlight, như được mô tả trong this blog post.

Visifire cũng cung cấp chart control.

Answer 2

Về cơ bản, nếu bạn đã chọn để viết mã để làm điều này bản thân, bạn cần phải tạo ra ba yếu tố đồ họa:

1. Các nền, ví dụ vùng màu xanh đậm, chỉ có thể là canvas hoặc lưới chính nó
2. Đường tia lửa (cái mà bạn gọi là đường cong), là một loạt các đoạn đường được tạo từ bộ sưu tập điểm
3. Một đa giác bao gồm của một tập hợp các điểm giống với điểm của đường tia lửa, cộng với đoạn đường được vẽ từ X2 cuối cùng, tọa độ Y2 đến cuối biểu đồ, một đoạn đường khác quay lại từ góc dưới cùng bên phải đến dưới cùng bên trái và phân đoạn cuối cùng từ dưới cùng bên trái lên đến các tọa độ X1, Y1 đầu tiên. Đa giác này sẽ được thêm vào khung hình trước vạch tia lửa và sẽ được tô màu khác với nền.

Cập nhật mã này bằng một số mã mẫu. Giả sử bạn có một danh sách các giá trị Y thô (và tôi xin lỗi vì không có thời gian để gửi một ví dụ hoàn chỉnh hơn):

// Declare a Polyline for the spark line 
Polyline sparkLine = new Polyline(); 

// Get style from the XAML user control resources 
sparkLine.Style = (Style)TryFindResource("graphLine"); 

// Declare a polygon for the background 
Polygon backgroundPolygon = new Polygon(); 

// Get its style 
backgroundPolygon.Style = (Style)TryFindResource("graphBackground"); 

// PointCollection for the graph 
PointCollection graphPointsCollection = new PointCollection(); 

// The X value for each point just gets advanced by a uniform amount for each 
// Y value on the graph, in this case by an int called gridUnit, which was defined elsewhere 
int currentX = 0; 

// Get the range covering the min and max graph bounds 
decimal graphValRange = maxGraphVal - minGraphVal; 

// Traverse the numeric values in a list, create points and add them to the PointCollection 
foreach (decimal graphVal in graphValues) 
{ 
    // Calculate the Y2 value as a percentage 
    decimal graphY2Val = (graphVal - minGraphVal)/graphValRange; 

    // Then apply that percentage to the overall graph height and that will be our Y2 value. 
    // NOTE: Since Y values are inverse, we subtract it from the graph height to render it correctly 
    double graphY2ValDouble = Convert.ToDouble(graphHeight - (graphY2Val * graphHeight)); 

    // Create a point from the X and Y values 
    Point currentPoint = new Point(currentX, graphY2ValDouble); 

    // Add it to the collection 
    graphPointsCollection.Add(currentPoint); 

    // Advance the X value each time (as a multiple of the grid unit) 
    currentX += gridUnit; 
} 

// For the background we'll use all the same points but need to clone. Otherwise, 
// when some additional points are added they would also end up in the spark line 
PointCollection backgroundPointsCollection = graphPointsCollection.Clone(); 

// Now add additional points to collection to create background polygon. 
// These will allow the polygon to be drawn to bottom right 
// and back to bottom left, completing the polygon. 
Point bottomRightPoint = new Point(currentX - gridUnit, graphHeight); 
Point bottomLeftPoint = new Point(0, graphHeight); 

backgroundPointsCollection.Add(bottomRightPoint); 
backgroundPointsCollection.Add(bottomLeftPoint); 

// Now assign the points to the background polygon 
backgroundPolygon.Points = backgroundPointsCollection; 

// Add the background to the graph first so it doesn't cover the spark line 
Graph.Children.Add(backgroundPolygon); 

// Finally, assign the graph points to the spark line 
sparkLine.Points = graphPointsCollection; 

// Add the spark line to the graph 
Graph.Children.Add(sparkLine); 

Đây là XAML cho phong cách:

<Style TargetType="Polyline" x:Key="graphLine"> 
    <Setter Property="Stroke" Value="#96EF4223" /> 
    <Setter Property="StrokeThickness" Value="2" /> 
</Style> 

<Style TargetType="Polygon" x:Key="graphBackground"> 
    <Setter Property="Fill"> 
     <Setter.Value> 
      <LinearGradientBrush EndPoint="0.5,0.003" StartPoint="0.5,0.994"> 
       <GradientStop Color="#24FAF8CA" Offset="0"/> 
       <GradientStop Color="#246EBDE9" Offset="1"/> 
      </LinearGradientBrush> 
     </Setter.Value> 
    </Setter> 
</Style> 

tôi đã sử dụng mã như thế này để tạo các biểu đồ như thế này: