3

我正在使用 Open Flash Charts v2。我一直在尝试制作条件折线图。但我找不到任何直接的方式、示例或任何生成条件图表的类。

条件图示例 条件图示例

所以我想使用一些技术来模拟条件图，我为超出限制范围的值制作了单独的 Line 对象，然后这条线用于与绘制的线重叠。

这种技术有些作用，但也有问题，

  1. 如何为有条件的彩色线着色或放置在限制之上。
  2. 从限制线上移除工具提示和点。
  3. 条件线（红色）和绘制线（绿色）的工具提示都显示了，我只需要绿线的工具提示。

条件线图问题说明 闪图

源代码： // C#

    var chart = new OpenFlashChart.OpenFlashChart();
    var data1 = new List<double?> { 1, 3, 4, 5, 2, 1, 6, 7 };//>4=
    var overlap = new List<double?> { null, null, 4, 5, null, null, null, null };
    var overlap2 = new List<double?> { null, null, null, null, null, null, 6, 7 };
    var limitData = new List<double?> { 4, 4, 4, 4, 4, 4, 4, 4 };

    var line1 = new Line();
    line1.Values = data1;
    //line1.HaloSize = 0;
    line1.Width = 2;
    line1.DotSize = 5;
    line1.DotStyleType.Tip = "#x_label#<br>#val#";
    line1.Colour = "#37c855";
    line1.Tooltip = "#val#";

    var overLine = new Line();
    overLine.Values = overlap;
    //overLine.HaloSize = 0;
    overLine.Width = 2;
    overLine.DotSize = 5;
    overLine.DotStyleType.Tip = "#x_label#<br>#val#";
    overLine.Colour = "#d81417";
    overLine.Tooltip = "#val#";

    var overLine2 = new Line();
    overLine2.Values = overlap2;
    //overLine2.HaloSize = 0;
    overLine2.Width = 2;
    overLine2.DotSize = 5;
    //overLine2.DotStyleType.Tip = "#x_label#<br>#val#";
    //overLine2.DotStyleType.Type = DotType.DOT;
    overLine2.Colour = "#d81417";
    overLine2.Tooltip = "#val#";

    var limit = new Line();
    limit.Values = limitData;
    limit.Width = 2;
    limit.Colour = "#ff0000";
    limit.HaloSize = -1;
    limit.DotSize = -1;
    // limit.DotStyleType.Tip = "";
    limit.DotStyleType.Type = null;
    //limit.Tooltip = "";

    chart.AddElement(line1);
    chart.AddElement(overLine);
    chart.AddElement(overLine2);
    chart.AddElement(limit);

    chart.Y_Legend = new Legend("Experiment");
    chart.Title = new Title("Conditional Line Graph");
    chart.Y_Axis.SetRange(0, 10);
    chart.X_Axis.Labels.Color = "#e43456";
    chart.X_Axis.Steps = 4;
    chart.Tooltip = new ToolTip("#val#");
    chart.Tooltip.Shadow = true;
    chart.Tooltip.Colour = "#e43456";
    chart.Tooltip.MouseStyle = ToolTipStyle.CLOSEST;
    Response.Clear();
    Response.CacheControl = "no-cache";
    Response.Write(chart.ToPrettyString());
    Response.End();

笔记：

我已经下载了 OFC（Open Flash Charts）源，如果我修改 OFCLine.as源，我将如何为更改后的图表生成 json？,b/c 我目前正在使用 .Net 库为 OFC 图表生成 json，请务必让我知道这一点。

更新：

David Mears我根据我正在使用 FlashDevelop for ActionScript的建议修改了源代码。

PS：如果另一个图书馆可以完成这项工作，我愿意提供想法。

4

1 回答 1

1

如果您不介意进行一点重建，您可以在此处获取 OFC 的源代码并修改其中的Line.solid_line()方法open-flash-chart/charts/Line.as以相当轻松地完成此操作。

为了使用 .NET 库通过 JSON 设置额外的图表详细信息，您还必须进行修改OpenFlashChart/LineBase.cs以添加替代颜色和边界属性。我对 .NET 不是很熟悉，但根据现有属性，您可能会添加如下内容：

private double boundary;
private string altcolour;

[JsonProperty("boundary")]
public virtual double Boundary
{
    set { this.boundary = value; }
    get { return this.boundary; }
}
[JsonProperty("alt-colour")]
public virtual string AltColour
{
    set { this.altcolour = value; }
    get { return this.altcolour; }
}

然后我相信以下内容应该适用Line.as：

public function solid_line(): void {

    var first:Boolean = true;
    var i:Number;
    var tmp:Sprite;
    var x:Number;
    var y:Number;

    var last_e:Element;
    var ratio:Number;

    for ( i=0; i < this.numChildren; i++ ) {
        // Step through every child object.

        tmp = this.getChildAt(i) as Sprite;

        // Only include data Elements, ignoring extra children such as line masks.
        if( tmp is Element )
        {
            var e:Element = tmp as Element;

            if( first )
            {
                if (this.props.get('alt-colour') != Number.NEGATIVE_INFINITY) {
                    if (e._y >= this.props.get_colour('boundary'))
                    {
                        // Line starts below boundary, set alt line colour.
                        this.graphics.lineStyle( this.props.get_colour('width'), this.props.get_colour('alt-colour') );
                    }
                    else
                    {
                        // Line starts above boundary, set normal line colour.
                        this.graphics.lineStyle( this.props.get_colour('width'), this.props.get_colour('colour') );
                    }
                }

                // Move to the first point.
                this.graphics.moveTo(e.x, e.y);
                x = e.x;
                y = e.y;
                first = false;
            }
            else
            {
                if (this.props.get('alt-colour') != Number.NEGATIVE_INFINITY) {
                    if (last_e._y < this.props.get_colour('boundary') && e._y >= this.props.get_colour('boundary'))
                    {
                        // Line passes below boundary. Draw first section and switch to alt colour.
                        ratio = (this.props.get_colour('boundary') - last_e._y) / (e._y - last_e._y);
                        this.graphics.lineTo(last_e.x + (e.x - last_e.x) * ratio, last_e.y + (e.y - last_e.y) * ratio);
                        this.graphics.lineStyle( this.props.get_colour('width'), this.props.get_colour('alt-colour') );
                    }
                    else if (last_e._y >= this.props.get_colour('boundary') && e._y < this.props.get_colour('boundary'))
                    {
                        // Line passes above boundary. Draw first section and switch to normal colour.
                        ratio = (this.props.get_colour('boundary') - last_e._y) / (e._y - last_e._y);
                        this.graphics.lineTo(last_e.x + (e.x - last_e.x) * ratio, last_e.y + (e.y - last_e.y) * ratio);
                        this.graphics.lineStyle( this.props.get_colour('width'), this.props.get_colour('colour') );
                    }
                }

                // Draw a line to the next point.
                this.graphics.lineTo(e.x, e.y);
            }

            last_e = e;
        }

    }

    if ( this.props.get('loop') ) {
        // close the line loop (radar charts)
        this.graphics.lineTo(x, y);
    }
}

使用新的 open-flash-chart.swf，您应该能够在以下位置设置新属性line1：

line1.Boundary = 4;
line1.AltColour = "#d81417";
于 2013-03-06T18:42:58.493 回答