Question

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

条件图的示例 Example of Conditional Graph

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

这种技术可以正常运行，但是存在问题，

如何将条件彩色线正好上色或放置在限制之上。
从限制线移除工具提示和点。
显示条件线（红色）和绘制线（绿色）的工具提示，我只需要绿线的工具提示。

说明了条件线图问题 flash chart

源代码： // 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吗？ ，b / c我目前正在为OFC图表的json世代使用.Net库，请告诉我这个。

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

P.S：如果其他图书馆可以做这项工作，我愿意接受想法。

Answer 1

如果你不介意一点rebuilding，你可以获得OFC here的来源并修改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";

使用Open Flash Charts的条件线图

1 个答案: