0

fusionCharts スイートの fusionmaps を使用しています。これを行う方法を確認するためにすべてのドキュメントとナレッジベースを検索しましたが、運がなかったので、皆さんに連絡しています.

xml ドキュメントからデータを取得してデータを構築するマップ (swf ファイル) があります。その xml 内で、特定のエンティティに対して、javascript 呼び出しを行うことができます。swf があるファイルには、JS と jquery ライブラリがあります。最終的に、別の swf ファイルを UI ダイアログ ボックス内にポップアップ表示しようとしています。可能であれば、これを行う方法がわかりません。ダイアログボックスがポップアップしますが、空です。そこに配置したいswfファイルは、他のswfファイルの上にロードされます。助言がありますか？

これが私のコードの一部です。

<script type="text/javascript"><!--
$(document).ready(function() { 
    $("#dialogContainer").dialog({
        bgiframe: true,
        height: 500,
        width: 600,
        modal: true,
        autoOpen: false,
        buttons: { "Close": function() { $(this).dialog("close"); }},
        show: 'fold',
        hide: 'fold'
    });
}); //Close ready function  


function loadDialog(continent) {
    //var url = 'showDetails.cfm?region=' + continent;
    //$("#dialogContainer").html('Loading. Please wait...');
    $.ajax({
        type: "post",
        url: 'showDetails.cfm',
        cache: false,
        //dataType: 'html',
        data: 'region=' + continent,
        beforeSend: function() {$('#dialogContainer').html('Loading. Please wait...').dialog('open');},
        success: function(msg) {$('#dialogContainer').html(msg);},
        error: function(msg) {$('#dialogContainer').html(msg);} 
    });
}

私のフュージョンマップ呼び出し

<script type="text/javascript">
var map = new FusionMaps("Maps/FCMap_World8.swf", "Map1Id", "500", "300", "0", "0");
map.setDataURL("WorldData2.xml");
map.render("mapdiv");     
</script>

これがこの質問のロングショットであることは知っていますが、ただ願っています。ご覧いただき、ありがとうございます。

クリス

4

2 に答える 2

0

jQuery モーダル ウィンドウ (ダイアログ) で FusionCharts をレンダリングするために必要なリソースとサンプル コードをお送りします。

FusionCharts の同じ (LinkedCharts を使用した) 機能の非常に異なる実装が、PowerCharts コード サンプルドキュメントに掲載されています。

jQuery ダイアログ内で FusionCharts をレンダリングするために必要な手順

手順 1: HTML ダイアログ コンテナーを作成する

ページの任意の場所に空白の <div> を作成し、一意の ID を付けます。

<div id="chart-container"></div>

ステップ 2: jQuery ダイアログと FusionCharts オブジェクトを作成する

ページの読み込み時 (jQuery ドキュメント対応)、上記で作成した分割を jQuery ダイアログ ボックスに変換します。

<script type="text/javascript"><!--

// 後で使用するためのグローバルにアクセス可能な変数
var jqDialog;

// ドキュメントの準備ができたらダイアログ ボックスを作成します。
$(document).ready(function() {
    jqDialog = $('#chart-container').dialog({
        オートオープン: false,
        幅: 550、
        高さ: 320,
        title : 「jQuery ダイアログの FusionCharts」
    });
});

var myChart = new FusionCharts({
    swfUrl: 'Charts/Column2D.swf',
    幅: '100%', 高さ: '100%',
    renderAt: 'チャートコンテナ'
});

// --></script>

ステップ 3: FusionCharts をロードする関数を作成する

次に、FusionCharts をロードしてダイアログを開く JavaScript 関数を作成します。

<script type="text/javascript"><!--

関数 loadChartInDialog () {
    jqDialog.dialog('open'); // ダイアログを開く
    myChart.setXMLUrl('Data.xml'); // チャートのデータを設定
    myChart.render(); // チャートをレンダリングします。
}
//--></script>

これで、必要に応じて、ユーザーはこのloadChartInDialog関数を呼び出してダイアログを開き、チャートをロードできます。

于 2011-03-21T07:49:11.070 に答える
0

バージョン 3.2 より前の FusionCharts を使用している場合は、チャートの wmode を opaque または transparent に設定する必要があります。

ここに役立つサンプルがあります：

http://www.igcomm.com/show/maps/drill/jQuery

ここでは 3.1 FusionMaps と 3.1.1 FusionCharts が使用されています。スクリーンショットは次のとおりです。

マップエンティティがクリックされた後にドリルダウンとして開くjQueryダイアログのFusionCharts

コードは次のとおりです。

<html>
  <head>
    <!-- Load FusionMaps 3.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionMaps.js"></script>
    <!-- Load FusionCharts 3.1.1 JavaScript wrapper -->
    <script language="JavaScript" src="FusionCharts.js"></script>
    <!-- Load jQuery UI resources to load jQuery dialog -->
    <link href="jquery.ui/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="jquery.ui/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.ui/jquery-ui.min.js" type="text/javascript"></script>
  </head>
  <body>
    <!-- Declare map and chart container DIVs -->
    <div id="mapdiv" align="center">FusionMaps will load here!</div>
    <div id="chartContainer" style="width:300px;height:300px;">FusionCharts will load here!</div>

    <script type="text/javascript"><!--

       // Declare jQuery dialog on the chart container
       var dialog;
       $(document).ready(function() {
            dialog = $('#chartContainer').dialog({
                autoOpen: false,
                width: 340,
                height: 370,
            });
        });

       // Define and render map of World
       // In the XML data of the map each entity is linked to a JavaScript function showChart 
       // where respective entity id is passed
       var map = new FusionMaps("FCMap_World.swf", "Map1Id", "700", "450", "0", "0");
       // set map to opaque mode
       map.setTransparent(false);
       // If you wish you can set map to transparent mode uncommenting the line below
       //map.setTransparent(true);
       map.setDataURL("mapdata.xml");          
       map.render("mapdiv");


      // This function is called when a Map entity is clicked
      // It takes id as parameter where respective entity id is passed         
      function showChart(id)
      {

        // Stores the full name of each entity with resepct to the id
        var mapNames = {"NA" : "Noth America" , "SA" : "South America" , "AS" : "Asia" , "EU" : "Europe", "AF" : "Africa", "AU" : "Australia"};

        // Render chart
        var chart = new FusionMaps("Pie2D.swf", "chartId", "300", "300", "0", "0");

        // Set chart to opaque mode
        chart.setTransparent(false);
        // f you wish you can set chart to transparent mode uncommenting the line below
        //chart.setTransparent(true);

        // In this simple same detailed data for each map is stored in different files
        // The files are named as per the id
        chart.setDataURL(id+"Chart.xml");          
        chart.render("chartContainer");

        // Sets the dialog's title with the full name of the clicked entity
        dialog.dialog( "option", "title", 'Chart of ' + mapNames[id] );
        // Show the jQuery dialog which contains the chart
        dialog.dialog('open');
      }
    // -->   
    </script>
  </body>
</html>

ソースのダウンロードもあります: http://www.igcomm.com/show/maps/drill/jQuery/download.zip。

于 2011-06-03T11:20:28.623 に答える