0

私は FusionCharts を使用していますが、これらのチャートを使用する方法は...

  1. JavaScript では、新しいチャートがインスタンス化されます
  2. 新しいチャート オブジェクトを作成するには、div ID を指定する必要があります
  3. 私のページはサーバーからコンテンツを動的に読み込みますが、ユーザーは実際にページを離れることはありません
  4. フュージョン チャートでは、すでにチャートが含まれている div 内に 2 つ目のチャートを作成することはできません
  5. そうは言っても、親コンテンツ ページがまだ読み込まれていない場合でも、考えられるすべてのグラフを事前に定義し、ページの読み込み時にインスタンス化する必要があります。
  6. さらに、これらのチャート「オブジェクト」を作成するには、ID で参照される特定のチャートごとに div 要素が指定されている必要があります。

コード スニペットを次に示します。

var Charts = new Array();
function InitCharts() {
    Charts[0] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA1", "340", "340");
    Charts[1] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA2", "340", "340");
    Charts[2] = new FusionCharts("MSColumn3DLineDY.swf", "divChartSSumA3", "340", "340");
}

上記の問題は、div 要素を事前に作成し、使用していないときに一時的に非表示にし、表示する必要があるときに適切なプレースホルダー内に表示する方法です。ユーザーがグラフの「ページ」間をすばやく切り替えて、各ページがサーバーから動的にロードされ、ページのメイン コンテンツ エリアに「挿入」されるようにしたいと考えています。したがって、特定のチャートのコンテンツがロードされていない場合、チャート オブジェクトはその親 div が存在しないというエラーを発生させます。

具体的には、名前付き div の非表示のリストを維持し、必要に応じて特定の場所に表示するにはどうすればよいでしょうか? 問題は、各要素がそのチャート オブジェクトに完全に対応していることを確認することから始まります。

また、目に見えない div オブジェクトを作成し、その参照をチャートと共にこの配列に格納できたらどうなるか考えています。さらに良いことに、A) Chart オブジェクトと B) div 要素だけを持つ独自のクラスを作成するにはどうすればよいでしょうか。

注意: コンテンツ セクションが変更され、div が消えた場合、コンテンツをクリアして置き換える前に、チャート プレースホルダー div を元の場所に「移動」する必要があります。innerHTML を難しい方法で動かさずにこれを回避するために、どのようなトリックがあるのか​​ わかりません。これらの div 要素がクリアされたときにページのコンテンツとともに削除されることを心配しています (他の動的なページのコンテンツに置き換えられます)。

4

3 に答える 3

2

採用できる別の方法は、すべてのチャートに新しい div を作成し、必要に応じて非表示/表示することです。

例えば、

var Charts = new Array();
var openChart = null;
var chartTarget = $("#chartTarget");

for(var i = 0; i < nCharts; i++)
{
    var chartDiv = $("<div/>", {
        id:'chart_' + i
    });
    chartDiv.hide();
    chartDiv.appendTo(chartTarget);

    Charts[i] = new FusionCharts("Column.swf", "chart_" + i);

    // now the chart div has been hidden and appended to the target
}

function showChart(index)
{
    // first, see if an open chart exists
    if(openChart !== null)
    {
        openChart.hide();
    }

    // find the target chart div to show
    var targetChartDiv = $("#chart_" + index);
    targetChartDiv.show();

    // now the new opened chart is the target chart div
    openChart = targetChartDiv;
}

このようにして、各チャートは一意の ID に残ります。ID はインデックスによって定義されるため、div の配列を作成する必要はありません。ID で要素を取得するだけで、正常に動作するはずです。

于 2012-03-28T08:34:00.540 に答える
1

問題を解決するためのクールな方法は、現在行っているように、ページを読み込む前にグラフをインスタンス化し続けることです。ただし、コンストラクターパラメーターをオブジェクトスタイルの表記に変更します。オブジェクトスタイルの構築では、（属性を使用して）グラフがレンダリングされるdivのIDを事前に指定し、renderAtページが読み込まれたときに、グラフを繰り返し処理して呼び出す.render()ことができます。

オブジェクトスタイルの表記は、現在使用している線形構築方法よりも多くのパラメーターと構成を提供します。

例：

var charts = [];
function InitCharts() {
    charts[0] = new FusionCharts({
        swfUrl: "MSColumn3DLineDY.swf", 
        renderAt: "divChartSSumA1", 
        width: "340",
        height: "340"
    });
}

function onFinalLoad() {
    var i = charts.length;
    while (i--) {
        charts[i].render();
    }
}

また、FusionChartsは、単一のdiv内で複数のチャートをレンダリングすることをサポートしています。オブジェクトスタイルの表記では、単にinsertMode: "append"

オブジェクトスタイルの表記について詳しくは、FusionChartsのドキュメントのJavaScriptの構築メソッドを参照してください。

于 2012-03-28T10:24:07.047 に答える
1

これに対する解決策を探している場合：「FusionChartsでは、すでにグラフが含まれているdiv内に2番目のグラフを作成することはできません」、すでに解決策があります。

オブジェクトベースのコンストラクターパラメーターでinsertModeコンストラクタープロパティを使用します。可能な値は、「replace」、「append」、「prepend」です。

あなたが試すことができる例：

    var myChart = FusionCharts.render({
        swfUrl : "../../../../Charts/Column3D.swf",
        width: "400",
        height: '300',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });


     var myChart2 = FusionCharts.render({
        swfUrl : "../../../../Charts/Column2D.swf",
        width: "400",
        height: '300',
        insertMode: 'append',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });

     var myChart3 = FusionCharts.render({
        swfUrl : "../../../../Charts/Line.swf",
        width: "400",
        height: '300',
        insertMode: 'prepend',
        renderAt : "chartContainer",
        dataSource : '<chart caption="Weekly Sales Summary" xAxisName="Week" yAxisName="Sales" numberPrefix="$"><set label="Week 1" value="14400" /><set label="Week 2" value="19600" /><set label="Week 3" value="24000" /><set label="Week 4" value="15700" /></chart>',
        dataFormat : "xml"
    });
于 2012-03-28T10:24:54.527 に答える