mslineフュージョンチャートの半分にトレンドラインを表示する方法は？

Question

画面トレンドラインの2つの別個の部分を表示するあなたの要件を満たすために使用することはできません

window.renderScoreCardCharts = function(param) { 
       //if(FusionCharts("chartContainerFive")) FusionCharts("chartContainerFive").dispose(); 
       for(var i=0;i<=5;i++){ 
       var chartContainerFive = new FusionCharts(
         { 
          /*"id": "scoreCardContainerBarId"+i, 
          "type" : "MSSPLine", 
          "type" : "MSLine", 
          "renderAt" : "scoreCardContainerBar"+i, 
          "width" : "100%", 
          "height" : "120px", 
          "dataFormat" : "json",*/ 

         "id": "scoreCardContainerBarId"+i, 
         "renderAt" : "scoreCardContainerBar"+i, 
         "type": 'msline', 
         "width" : "100%", 
         "height" : "120px", 
         "dataFormat": 'json', 



         "dataSource" : { 
         "chart": {"caption": arr[i], 
          "captionFontSize" : "12", 
          "captionFontColor" : "#8a807c", 
          "captionFontBold" : "1", 
          "showLegend" : "0", 
          "bgcolor" : "FFFFFF", 
          "drawAnchors":"0", 
          "showalternatehgridcolor" : "1", 
          "showValues" : "0", 
          "canvasborderalpha" : "0", 
          //"legendposition" : "right", 
          "legendshadow" : "0", 
          "legendborderalpha" : "0", 
          "palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78", 
          "exportEnabled" : "0", 
          "exportFileName" : "QCDDMSESChange", 
          "showToolTipShadow" : "1", 
          "toolTipBorderRadius" : "6", 
          "canvasbgAlpha" : "5", 
          "showBorder" : "0", 
          "showColumnShadow" : "0", 
          "labelDisplay" : 'Normal', 
          /* "slantLabels" : '0',*/ 
          "canvasbgColor" : "#ff6418", 
          "legendNumColumns" : "13", 
          "legendItemFontSize":"8", 
          "showTrendlinesOnTop ":"0", 
          "interactiveLegend":"1", 
          "theme":"fint", 
          "animation":"0", 
          "numberSuffix": " %", 
          "yAxisMinValue":"0.00", 
          "yAxisMaxValue":"100.00", 
          "minimizetendency": "1", 
          "numDivLines":"5", 
          "showShadow": "0", 
          "showCanvasBorder": "0", 
          "chartBottomMargin":"0", 
          "usePlotGradientColor": "0", 
          /*"labelDisplay": "rotate",*/ 
          "divlineThickness": "0", 
          "divLineDashed": "0", 
          "slantLabels": "0", 
          "divLineDashLen": "0", 
          "rotateValues" :"1", 
          "showToolTip" : "1", 
          "showAxisLines": "0"}, 
         "styles": { 
          "definition": [ 
           { 
           "name": "myToolTipFont", 
           "type": "font", 
           "size": "12" 
           } 
          ], 
          "application": [ 
           { 
           "toobject": "ToolTip", 
           "styles": "myToolTipFont" 
           } 
          ] 
          }, 
         "categories": [ 
          { 
           "category": [ 
            { 
             "label": "J", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "F", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "M", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "A", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "M", 
             "fontSize" : "6" 
            }, 
            { 
             "vLine": "true", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "J", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "J", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "A", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "S", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "O", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "N", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "D", 
             "fontSize" : "6" 
            }, 
            { 
             "label": "J", 
             "fontSize" : "6" 
            } 
           ] 
          } 
         ], 
         "dataset": [ 
          { 
           "color": "#FF0000", 
           "seriesname": "Value ", 
           "data": [ 
            { 
             "value": "44" 
            }, 
            { 
             "value": "48" 
            }, 
            { 
             "value": "54" 
            }, 
            { 
             "value": "64" 
            }, 
            { 
             "value": "55" 
            }, 
            { 
             "value": "51" 
            }, 
            { 
             "value": "60" 
            }, 
            { 
             "value": "70" 
            }, 
            { 
             "value": "78" 
            }, 
            { 
             "value": "80" 
            }, 
            { 
             "value": "81" 
            }, 
            { 
             "value": "82" 
            }, 
            { 
             "value": "85" 
            } 
           ] 
          } 

         ], 
         "trendlines": [ 
             { 
              "line": [ 
               { 
                "startvalue": "80", 
                "endValue" : "85", 
                "dashed" : "1" 
               }, 
               { 
                "startvalue": "48", 
                "endValue" : "70", 
                "dashed" : "1" 
               } 
             ] 
             } 
            ] 
         } 

      }); 
    chartContainerFive.render(); 
      } 

    }//window render chart 

Answer 1

トレンドライン機能

ショット。

または、FusionChartsのライン注釈を使用して、必要に応じて同様の実装を行うことができます。参考：http://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/creating-annotations/creating-shape-annotations.html#line

注釈の位置を設定するには、動的位置決めマクロを使用することができます。参考のために：あなたが必要としてhttp://www.fusioncharts.com/dev/advanced-chart-configurations/annotations/positioning-annotations-using-macros.html#positioning-annotations-with-respect-to-the-axes

は同様の実装とサンプルフィドルを探す：http://jsfiddle.net/Akash008/LE3Fa/154/

FusionCharts.ready(function() { 
var chartContainerFive = new FusionCharts(
    { 

    "id": "scoreCardContainerBarId", 
    "renderAt" : "chart-container", 
    "type": 'msline', 
    "width" : "100%", 
    "height" : "300", 
    "dataFormat": 'json', 



    "dataSource" : { 
     "chart": {"caption": "Enter the Caption here", 
       "captionFontSize" : "12", 
       "captionFontColor" : "#8a807c", 
       "captionFontBold" : "1", 
       "showLegend" : "0", 
       "bgcolor" : "FFFFFF", 
       "drawAnchors":"0", 
       "showalternatehgridcolor" : "1", 
       "showValues" : "0", 
       "canvasborderalpha" : "0", 
       //"legendposition" : "right", 
       "legendshadow" : "0", 
       "legendborderalpha" : "0", 
       "palettecolors" : "#f8bd19,#008ee4,#33bdda,#e44a00,#6baa01,#583e78", 
       "exportEnabled" : "0", 
       "exportFileName" : "QCDDMSESChange", 
       "showToolTipShadow" : "1", 
       "toolTipBorderRadius" : "6", 
       "canvasbgAlpha" : "5", 
       "showBorder" : "0", 
       "showColumnShadow" : "0", 
       "labelDisplay" : 'Normal', 
       /* "slantLabels" : '0',*/ 
       "canvasbgColor" : "#ff6418", 
       "legendNumColumns" : "13", 
       "legendItemFontSize":"8", 
       "showTrendlinesOnTop ":"0", 
       "interactiveLegend":"1", 
       "theme":"fint", 
       "animation":"0", 
       "numberSuffix": " %", 
       "yAxisMinValue":"0.00", 
       "yAxisMaxValue":"100.00", 
       "minimizetendency": "1", 
       "numDivLines":"5", 
       "showShadow": "0", 
       "showCanvasBorder": "0", 
       "chartBottomMargin":"0", 
       "usePlotGradientColor": "0", 
       /*"labelDisplay": "rotate",*/ 
       "divlineThickness": "0", 
       "divLineDashed": "0", 
       "slantLabels": "0", 
       "divLineDashLen": "0", 
       "rotateValues" :"1", 
       "showToolTip" : "1", 
       "showAxisLines": "0"}, 
     "styles": { 
     "definition": [ 
      { 
      "name": "myToolTipFont", 
      "type": "font", 
      "size": "12" 
      } 
     ], 
     "application": [ 
      { 
      "toobject": "ToolTip", 
      "styles": "myToolTipFont" 
      } 
     ] 
     }, 
     "categories": [ 
     { 
      "category": [ 
      { 
       "label": "J", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "F", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "M", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "A", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "M", 
       "fontSize" : "6" 
      }, 
      { 
       "vLine": "true", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "J", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "J", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "A", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "S", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "O", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "N", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "D", 
       "fontSize" : "6" 
      }, 
      { 
       "label": "J", 
       "fontSize" : "6" 
      } 
      ] 
     } 
     ], 
     "dataset": [ 
     { 
      "color": "#FF0000", 
      "seriesname": "Value ", 
      "data": [ 
      { 
       "value": "44" 
      }, 
      { 
       "value": "48" 
      }, 
      { 
       "value": "54" 
      }, 
      { 
       "value": "64" 
      }, 
      { 
       "value": "55" 
      }, 
      { 
       "value": "51" 
      }, 
      { 
       "value": "60" 
      }, 
      { 
       "value": "70" 
      }, 
      { 
       "value": "78" 
      }, 
      { 
       "value": "80" 
      }, 
      { 
       "value": "81" 
      }, 
      { 
       "value": "82" 
      }, 
      { 
       "value": "85" 
      } 
      ] 
     } 

     ], 
     /*"trendlines": [ 
     { 
      "line": [ 
      { 
       "startvalue": "80", 
       "endValue" : "85", 
       "dashed" : "1" 
      }, 
      { 
       "startvalue": "48", 
       "endValue" : "70", 
       "dashed" : "1" 
      } 
      ] 
     } 
     ],*/ 
     "annotations": { 
     "showBelow" : "0", 
     "width": "500", 
     "height": "100", 
     "autoScale": "1", 
     "groups": [ 
      { 
      "id": "user-images", 
      "items": [ 
       { 
        "id": "line-part-1", 
        "type": "line", 

        "color": "#00FF00", 
        "x": "$xaxis.label.0.x", 
        "y": "$yaxis.label.2.y", 

        "toX": "$xaxis.label.4.x+22", 
        "toY": "$yaxis.label.2.y" 
       }, 
       { 
        "id": "line-part-2", 
        "type": "line", 

        "color": "##0000FF", 
        "x": "$xaxis.label.4.x+22", 
        "y": "$yaxis.label.3.y", 

        "toX": "$xaxis.label.12.x+4", 
        "toY": "$yaxis.label.3.y" 
       } 
      ] 
      } 
     ] 
     } 
    } 
}); 
chartContainerFive.render(); 
});