使用Open Flash Charts绘制条件折线图

Question

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

条件图表示例

所以我想使用一些技术来模拟条件图表，我为超出限制范围的值制作了单独的线条对象，然后将该线条用于覆盖绘制的线条。

这种技术有点可行，但也存在问题：

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）源代码，如果我修改了OFC Line.as源代码，那么我如何生成更改后的图表的json？因为我目前正在使用.Net库生成OFC图表的json，请您也告识我这一点。

更新：

在David Mears的建议下，我已经修改了源代码，我正在使用FlashDevelop进行ActionScript开发。

P.S：如果有其他库可以完成此工作，我也愿意尝试。

- Owais Qureshi

Answer 1

如果您不介意稍微重构一下，您可以在这里获取OFC的源代码here，并修改open-flash-chart/charts/Line.as中的Line.solid_line()方法，从而相对容易地实现此操作。

为了通过JSON使用.NET库设置额外的图表细节，您还需要修改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";

- David Mear

---

好的，没问题。我已经下载了那个源代码，但是我不懂Actionscript，不过我会尝试着去学习它 :) - Owais Qureshi

我已经更新了问题，正在尝试您的建议。 - Owais Qureshi

我已经编辑了我的答案，使其更加全面。您还需要编辑.NET库（因此在dot-net-library / ...文件夹中的LineBase.cs）。这有点复杂，但我猜您根据您的句柄应该比我更了解.NET！ - David Mear

我应该用你的代码替换 solid_line() 函数还是将其嵌入到 solid_line() 函数中？ - Owais Qureshi

你的json文件中肯定应该有一个alt-colour属性。看起来添加了Boundary属性是可以的，你是否对AltColour做了任何不同的处理？即便如此，备选颜色也会默认为黑色，所以旧的swf文件可能仍然被缓存了吗？ - David Mear