如何使用我的 javascript 函数渲染 fusionchart答案

【问题标题】：How render fusionchart using my javascript function如何使用我的 javascript 函数渲染 fusionchart
【发布时间】：2013-10-23 23:36:51
【问题描述】：

我想从我的 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可以是渲染融合图实际功能的函数。

提前致谢。

【问题讨论】：

请您详细说明您的要求是什么？从您的问题来看，您似乎想做var MyChart = {Column: {YFColumn3D: FusionCharts}};!!但这肯定不是我认为你真正想要的。 :-)
感谢您的回复，我只想调用“var myChart = new FusionCharts("Column3D", "myChartId", "400", "300");"来自我的自定义函数，例如“var column3d = new MyChart.Column.YFColumn3D("MSColumn3D", "MSColumn3DChart", "1100", "300");" YFColumn3D 可以是包含“new FusionCharts(...”函数)的函数。
它类似于抽象的 fusionchart 函数到我的函数中。
然后只需将FusionCharts 分配给对象中的变量并使用它。

标签： javascript fusioncharts

【解决方案1】：

从问题下讨论中的 cmets 得出，您需要基于图表类型的单独函数。一种很酷的方法是围绕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>

我不确定这是否能满足您的要求，但我仍会尝试解释我是如何使其工作的。如果您的问题有所不同，我会要求您重新措辞或详细说明。更好的问题，更好的解决方案。 ;-)

我首先在包含FusionCharts.js 之后定义的匿名函数中使用了两个参数。第一个参数是我打算在函数中使用的图表类型列表，第二个参数是我想借给映射到每个图表类型的单个函数的对象。
然后，我遍历了所需图表类型的列表，并向我的对象添加了要为该对象中的每个属性扩展的函数。这些函数只接受id、width 和height。
每个图表类型的函数都放在一个闭包下以保留图表类型。
每个图表的函数在调用时会返回一个具有特定图表类型和其他参数的新 FusionCharts 实例。

【讨论】：