FusionCharts Suite XTは、FusionCharts XT、PowerCharts XT、FusionWidgets XT、FusionMaps XTを含む、包括的なクロスプラットフォームのクロスブラウザーJavaScriptチャートパッケージです。ASP、ASP.NET、PHP、JSP、ColdFusion、Ruby on Rails、JavaScript、さらには単純なHTMLページもサポートします。これは信頼できるJavaScriptチャートソリューションです。現在、世界中の45万人のユーザーがFusionchartsを選択してプロのJavaScriptチャートを作成しています。
FusionChartsの最新バージョンをダウンロードする[Huidu.com]
ズームされた折れ線グラフを作成する
たとえば、ズーム折れ線グラフを作成して、昨年の各日のharrysfoodmart.comおよびharrysfashion.comWebサイトへの一意のWebサイト訪問数をプロットします。
ズーム折れ線グラフを作成するには、次の手順を実行します
。JSONデータで、属性とそれに対応する値を「<attributeName>」：「<value>」の形式で設定します。
type属性を使用して、チャートタイプを指定します。ズームされた折れ線グラフをレンダリングするには、zoomlineを設定します。
renderAtプロパティを使用して、コンテナオブジェクトを設定します。
width属性とheight属性を使用して、グラフのサイズを指定します。
dataFormatプロパティを使用して、グラフオブジェクトに渡されるデータ型（JSON / XML）を設定します。
コンパクトフォーマットとしてJSONデータを指定するには、compactDataModeプロパティを1に設定します。
pixelPerPointプロパティを設定して、データポイントのレンダリングに使用されるピクセル数を指定します。ピクセル数が多いほど、表示品質が高くなります。このプロパティは、連続するデータグラフ間の距離を設定するためにも使用されます。
pixelPerLabelプロパティを設定して、データラベルのレンダリングに使用されるピクセル数を指定します。
lineThicknessプロパティを使用して、文字の線の太さを指定します。
FusionChartsにはデータポイントの外部URLを定義するためのサポートAPIが含まれていないため、ズームされた折れ線グラフのアンカーポイントをクリックすることはできません。
この方法で作成されたズーム折れ線グラフは次のとおりです。
上の図に示すように、レンダリングすると、ズームされた折れ線グラフにデータのマクロビューが表示されます。データはきちんと圧縮されているため、すべてのデータがグラフの幅に収まります。ユーザーがキャンバス上でマウスカーソルをドラッグして折れ線グラフの一部を選択すると、選択した部分が拡大してグラフの幅全体を占めます。
この時点で、スクロールバーが機能し、ユーザーは選択したデータセクションの前後のデータを表示できます。データをより詳細に分析するために、ユーザーは選択とズームのプロセスを数回繰り返すことができます（それ以上のズームが不可能になるまで）。チャートのリセットツールバーのボタンをクリックして、チャートを元のマクロ表示モードに復元します。
統計グラフは、固定モードで固定モードに切り替えることができます。選択した線分のゴーストがキャンバスに印刷されるため、ユーザーはスクロールして固定セグメントをチャートの他の部分と比較できます。固定線分は、キャンバスの任意の部分にドラッグできます。
ズーム折れ線グラフのパフォーマンスは、ブラウザの技術的機能に基づいています。一般的なズーム折れ線グラフは、パフォーマンスの問題なしに最大10,000のデータポイントをレンダリングできます。
FusionChartsにはデータポイントの外部URLを定義するためのサポートAPIが含まれていないため、ズームされた折れ線グラフのアンカーポイントはクリックできません。
ツールチップに値を表示する
デフォルトでは、useCrossLine属性は1に設定されており、これは有効になっています。useCrossLineがデータポイントにカーソルを合わせると、グラフでデータ値を表示できるようになります。すべての系列で、グラフには垂直線に沿ったツールチップが降順で表示されます。useCrossLineが0（無効）に設定されている場合、データポイントにカーソルを合わせると、そのデータポイントの値のみが表示されます。
設定するには、useCrossLineは次のコードを参照してください：
{
"chart"：{
"useCrossLine"： "1"
}、
}
ズームラインを使用してデュアルY軸チャートを作成する
FusionCharts Suite XTズーム線の二重y軸グラフは、マクロおよびミクロレベルのデータの分析に使用されるズーム折れ線グラフと同じです。このグラフは、2つのy軸を使用して、異なる数値単位のデータセットに属するデータを同じグラフにプロットできます。これには、従来のズーム折れ線グラフを使用する場合に比べて利点があります。
ズーム線付きの二重Y軸グラフを使用するもう1つの利点は、2つのデータセットを比較する場合、一方のデータセットの値が短い時間間隔で分散され、もう一方のデータセットの値が分散されることです。セットの時間間隔が長くなります。この場合、ズームされた折れ線グラフを使用すると、間隔の短いデータセットが直線として描画されます。
ズーム線を使用してデュアルY軸グラフを作成するには、type属性をzoomlinedyに設定します。
属性の詳細なリストについては、チャートのプロパティページzoomlinedyを参照してください。
次の図は、前年の各日の固有のトラフィックと売上（米ドル）を比較するために使用されるズームされたデュアルY軸チャートを示しています。
データタグの数を制限する
デフォルトでは、ズームされた折れ線グラフには、混乱を招くことなく、できるだけ多くのデータラベルが表示されます。
ただし、numVisibleLabels属性で数を指定することにより、任意の時点で表示されるデータラベルの最大数を制限することもできます。以下の例では、1つの画面に表示されるラベルの数は12です。フロントタブまたはバックタブを表示するには、スクロールバーを使用する必要があります。
以下のコードを参照してください。
{
"chart"：{
"numVisibleLabels"： "12"
}、
}
ラベルの最大数を制限する拡大折れ線グラフは次のとおりです
。numVisibleLabelsプロパティは、表示されるデータラベルの数のみを制限します。 ;表示されるデータポイントの数には影響しません。
データグラフ間の距離を設定します
ズームされた折れ線グラフで、pixelsPerPointプロパティを使用して、連続するデータグラフ間の距離（ピクセル単位）を設定します。ピクセル数が多いほど、表示品質が高くなります。
以下のコードを参照してください。
{
"chart"：{
"pixelsPerPoint"： "40"
}、
}
FusionChartsには外部URLを定義するためのサポートAPIが含まれていないため、ズームされた折れ線グラフのアンカーポイントをクリックできません。データポイント。
アンカー表示条件を設定する
混乱を減らすために、アンカーは、連続するデータポイント間の距離が特定の最小値に達した場合にのみ表示できます。たとえば、25ピクセルで区切られた連続したデータポイントがある場合にのみアンカーを表示するようにグラフに指示できます。
グラフに大量のデータが含まれている場合、連続するデータポイント間の距離が25ピクセル未満のマクロビューでは、アンカーポイントは表示されません。アンカーポイントは、グラフがズームされている場合にのみ表示され、連続するデータポイント間の距離は25ピクセル以上に増加します。
連続するデータポイント間の最小距離を指定するには、anchorMinRenderDistance属性値をピクセル単位で設定します。
以下のコードを参照してください。
{
"chart"：{
"anchorMinRenderDistance"： "15"
}、
}
表示されるデータグラフの数を事前に選択する
デフォルトでは、ズームされた折れ線グラフはすべてのデータグラフを1つの画面に表示します。ただし、レンダリング中に1つの画面に表示されるデータグラフの最大数を事前に選択できます。
画面上のデータグラフの数を事前に選択するには、次の手順に従います。
displayStartIndexプロパティを設定して、グラフの左端に表示されるデータラベルのインデックスを指定します。
displayEndIndexプロパティを設定して、グラフの右端に表示されるデータラベルのインデックスを指定します。
以下のコードを参照してください。
{
"chart"：{
"displayStartIndex"： "49"、
"displayEndIndex"： "253"
}
}
事前に選択された数のデータチャートを含むズームされた折れ線グラフを以下に示します。
ズームした折れ線グラフの外観をカスタマイズする
FusionCharts Suite XTには、ズームされた折れ線グラフの外観をカスタマイズするためのいくつかのオプションが含まれています。スクロールバーやツールバーなどのグラフ要素の外観を構成できます。
ツールバーボタンの構成に使用される属性は次のとおりです。
設定16進コードtoolbarButtonColorを使用して、ツールバーボタンの色を指定します。
showToolBarButtonToolTextプロパティを0に設定して、ツールバーボタンのツールチップ表示を無効にします。この属性のデフォルト値は1です。
以下のコードを参照してください。
{
"chart"：{
"toolbarButtonColor"： "ff0000"、
"showToolBarButtonToolText"： "0"
}
}
グラフは次の図のようになります。
グラフのズームとパンを構成するには：
zoomPaneBgColorプロパティを使用して、ズームペインの背景色を指定する10個の16進コードを設定します。
zoomPaneBgAlphaプロパティを使用して、ズームペインの透明度を設定します（0〜100の範囲）。
以下のコードを参照してください：
{
"chart"：{
"zoomPaneBgColor"： "＃a7d7f9"、
"zoomPaneBgAlpha"： "50"
}
}
チャートのピン変換を設定するには
、固定線の太さを指定するpinLineThicknessDeltaプロパティを使用。ピンラインは、チャートがピンラインモードになっている場合にのみ表示されます。
pinPaneBgColorプロパティを使用して、背景の16進カラーコードを指定します。
pinPaneBgAlphaプロパティを使用して、画鋲ペインの透明度（0〜100の範囲）を指定します。
以下のコードを参照してください。
{
"chart"：{
"pinLineThicknessDelta"： "5"、
"pinPaneBgColor"： "＃87919b"、
"pinPaneBgAlpha"： "50"
}
}
のズームモードを設定するプロパティのリストズームアウトボタンは次
のとおりです。btnResetChartTooltextプロパティを指定して、[チャートのリセット]ボタンのデフォルトのツールテキストを指定された文字列に置き換えます。
btnZoomOutTooltextプロパティを指定して、[ズームアウト]ボタンのデフォルトのツールテキストを指定された文字列に置き換えます。
btnSwitchToZoomModeTooltextプロパティを指定して、「ズームモードに切り替える」のデフォルトのツールテキストを指定された文字列に置き換えます。
btnSwitchToPinModeTooltextプロパティを指定して、[ピンモードに切り替える]ボタンのデフォルトのツールテキストを指定された文字列に置き換えます。
以下のコードを参照してください：
{
"chart"：{
"btnResetChartTooltext"： "リセットしますか？Go for it。"、
"btnZoomOutTooltext"： "Zoom Out the Chart"、
"btnSwitchToZoomModeTooltext"： "Yes"、
16進コードをscrollColorattributeに設定して、スクロールバーの色を指定します。
scrollHeightプロパティを使用して、スクロールバーの高さを指定します。
以下のコードを参照してください。
{
"chart"：{
"scrollColor"： "#bdbdbd"、
"scrollHeight"： "15"
}
}
カスタムピークデータ制限
ズームラインチャートには、多数のデータセットが表示されます。たとえば、過去10年間の2つ以上の部門の1日の収入をプロットするために使用できます。
ただし、グラフの最初の表示でプロットされたすべてのデータ値を表示することはできません。代わりに、データセットから賢明に選択された複数の値が表示されます。このようにして、価値の傾向をすばやく判断できます。このプロセスにより、リソース消費を削減し、チャートのパフォーマンスを向上させることもできます。データを洞察するには、ズームインして個々のプロットポイントに焦点を合わせます。
FusionChartsは独自のロジックを使用して、初期表示に表示されるチャートをインテリジェントに決定します。このようにして、外れ値またはピークを排除できます。したがって、特定の値が期待される結果を超えているかどうかに注意を払うようにしてください。たとえば、収入が急激に減少したり、通常に戻る前の月に予想よりも増加した場合は、外れ値を探します。
上記の場合、ズームラインチャートで3つの属性を使用でき
ます
。showPeakData：ブール値を使用
maxPeakDataLimit：値として数値を使用minPeakDataLimit：値として数値を使用
最初の属性は、条件を定義することをチャートに通知します。ピークデータの場合、および他の2つの各属性は条件を定義します。maxPeakDataLimit（ユーザーが提供）より大きい値はピークデータと見なされ、ズーム折れ線グラフの初期表示に含まれますが、minPeakDataLimitは反対の条件を定義します。
シーン1
グラフの特定の値より大きいすべての値を表示するには、次
の手順を実行します。showPeakDataの値を1に設定します。
maxPeakDataLimitの値を、グラフに表示する必要のあるグラフの最小値に設定します。
次のコードを参照してください：
{
"chart"：{
...
"showPeakData"： "1"、
"maxPeakDataLimit"： "1000"
}、
}
スキーム2
特定の値未満のすべての値をグラフに表示するには、次
の手順を実行してください。showPeakDataの値を1に設定します。
minPeakDataLimitの値を、グラフに表示する必要のあるグラフの最大値に設定します。
次のコードを参照してください：
{
"chart"：{
...
"showPeakData"： "1"、
"minPeakDataLimit"： "900"
}、
}
シナリオ3は、
以下の最大限界より最小値より大きいすべての値を表示するには、以下の操作を行ってください：
1にshowPeakDataの値を設定します。
minPeakDataLimitの値を、グラフに表示する必要のあるグラフの最大値に設定します。
maxPeakDataLimitの値を、グラフに表示する必要のあるグラフの最小値に設定します。
次のコードを参照してください：
{
"chart"：{
...
"showPeakData"： "1"、
"minPeakDataLimit"： "900"、
"maxPeakDataLimit"： "1000"
}、
}
オプション4
場合によっては、特定の外れ値よりも特定の値の範囲の方が重要です。たとえば、最初に表示されるズーム折れ線グラフに500〜1000の範囲のすべての値と、smartによって検出された値を含める必要がある場合があります。
FusionCharts v3.12.1以降、この目標は達成できません。ただし、v3.13.0以降、FusionChartsは、最小値を最大値よりも大きく設定することで最小-最大条件を逆にすることができる新機能をサポートしています。次に、グラフには範囲内のすべての値が含まれます。たとえば、v3.13.0では、500〜1000の範囲のすべての値を含めるには、次のようにします。
最小制限より大きく、最大制限より小さいすべての値を表示するには、次
の手順を実行します。showPeakDataの値を1に設定します。
minPeakDataLimitの値を1000に設定します。
maxPeakDataLimitの値を900に設定します。
次のコードを参照してください：
{
"chart"：{
...
"showPeakData"： "1"、
"minPeakDataLimit"： "1000"、
"maxPeakDataLimit"： "900"
}、
}
正規のライセンスを購入する場合FusionCharts Suite XTの、または製品の詳細については、[Huiduオンラインカスタマーサービスにご相談ください]