asp.net - 使用 Open Flash 图表的条件线图

Question

我正在使用 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)源代码，如果我修改 OFC Line.as 源代码，我将如何为更改后的代码生成 json graph ? ,b/c 我目前正在使用 .Net 库为 OFC 图表生成 json，请也让我知道这一点。

更新:

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

P.S:如果有其他图书馆可以完成这项工作，我愿意听取意见。

Answer 1

如果你不介意一点rebuilding ，你可以得到OFC的来源here并修改 open-flash-chart/charts/Line.as 中的 Line.solid_line() 方法以相当轻松地完成此操作。

为了使用 .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";