Question

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

提前致谢。

Answer 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>

我不确定这是否能解决您的要求，我仍然会尝试解释我是如何使其发挥作用的。如果您的问题不同，我会要求您重新说明或详细说明。更好的问题是，解决方案更好。 ; - ）

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

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

1 个答案: