條件線圖使用Open Flash圖表

Question

嗨，大家好，
我使用Open Flash圖表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（開放式Flash圖表）來源，如果我修改OFC Line.as來源比如何我可以爲改變後的圖形生成json嗎？，b/c我目前使用.Net庫的JSON代OFC圖表，請讓我知道這一點。

更新： 我已經修改了對David Mears我使用的是FlashDevelop爲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); 
    } 
} 

隨着新開放式閃存圖。SWF，你應該能夠只設置line1新的屬性：

line1.Boundary = 4; 
line1.AltColour = "#d81417";