0

JavaScript 関数からフュージョン チャートをレンダリング/呼び出したい。

例:- 現在、チャートを表示するにはこれらを実行する必要があります:-

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

      var myChart = new FusionCharts( "Column3D", "myChartId", "400", "300" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("chartContainer"); 
    // --> 
    </script>

しかし、私はそれを以下のようにレンダリングする関数を書きたい:-

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

      var column3d = new MyChart.Column.YFColumn3D("MSColumn3D", "MSColumn3DChart", "1100", "300");
      column3d.setXMLUrl("Data.xml");
      column3d.render("chartContainer"); 
    // --> 
    </script>

ここで、YFColumn3D は、フュージョン チャートの実際の関数をレンダリングする関数にすることができます。

前もって感謝します。

4

1 に答える 1

0

質問の下のディスカッションのコメントから、グラフの種類に基づいて個別の関数が必要であることがわかります。これを行うクールな方法の 1 つは、同じことを行うラッパー関数を作成することFusionChartsです。

<script type="text/javascript">
// Assuming that MyCharts is the object to which you want to
// add type based abstractions.
var MyCharts = {};

(function (requiredChartTypes, objectToExtend) {
    for (var chartType in requiredChartTypes) {
        objectToExtend[chartType] = (function (chartType) {
            return function (id, width, height) { // add more args if needed
                new FusionCharts({
                    type: chartType,
                    width: width,
                    height: height
                });
            };
        }(chartType));
    }
}({
    column3d: true,
    column2d: true
    pie2d: true
}, MyCharts));
</script>

<script type="text/javascript">
// Now anywhere you can use as follows
var newChart = MyCharts.column3d("myChartId", "1100", "300");
</script>
</head>

<body>
</body>
</html>

これがあなたの要件を解決するかどうかは正確にはわかりませんが、どうやってそれを機能させたかを説明しようと思います. 質問が異なる場合は、言い換えるか、詳しく説明してください。より良い質問は、より良い解決策です。;-)

  1. 最初に、 をインクルードした直後に定義された無名関数内で 2 つの引数を取りましたFusionCharts.js。最初の引数は、関数で使用する予定のチャート タイプのリストで、2 番目の引数は、各チャート タイプにマップされた個々の関数を貸したいオブジェクトです。
  2. 次に、必要なチャート タイプのリストを繰り返し処理し、オブジェクトの各プロパティに対して拡張したい関数をオブジェクトに追加しました。これらの関数はid、widthおよびのみを受け入れheightます。
  3. チャート タイプごとの関数は、チャート タイプを保持するためにクロージャの下に置かれます。
  4. チャートごとの関数は、呼び出されると、特定のチャート タイプとその他の引数を使用して FusionCharts の新しいインスタンスを返すように作成されます。
于 2013-10-23T15:36:51.663 に答える