我怎样才能画出像HTC'Stocks'应用程序一样漂亮的图形

Question

通过我的HTC Mozart，我下载了一个名为“Stocks”的应用程序，该应用程序主要关注股票（纳斯达克等）。

图表/图表看起来非常好，我想知道我怎么能做类似的事情。这是图表的图片：

我看到3种颜色： - 曲线上方（背景） - 曲线本身 - 在曲线下方

是否有任何免费/开放资源可以帮助我绘制这样的图形？欢迎任何博客文章或链接！

Answer 1

基本上，如果您选择编写代码来自己完成此操作，则需要创建三个图形元素：

1. 背景，例如深蓝色区域，可能只是画布或网格本身
2. 火花线（你称之为曲线），它是由积分集合构成的一串线段
3. 由与火花线相同的一组点组成的多边形，加上从最后一个X2绘制的线段，Y2坐标到图形的底部，另一个线段从右下角返回到左下角，从左下角到最后一个X1，Y1坐标的最后一段。此多边形将在火花线之前添加到画布，并且将被赋予与背景不同的填充。

使用一些示例代码更新此内容。假设你有一个原始Y值列表（我为没有时间发布更完整的例子而道歉）：

// 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);

以下是样式的XAML：

<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>

我使用这样的代码生成这样的图形：

Answer 2

您可以使用Silverlight Toolkit中的图表控件，如this blog post。

中所述

Visifire还提供chart control。