如何使用我的 JavaScript 函数渲染融合图

How render fusionchart using my javascript function

本文关键字：融合 函数 何使用 我的 JavaScript      更新时间：2023-09-26

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

提前谢谢。

从问题下讨论中的评论中，我得出您想要基于图表类型的单独函数。一种很酷的方法是围绕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. 包含 FusionCharts.js 之后，我首先在定义的匿名函数中采用了两个参数。第一个参数是我打算在函数中使用的图表类型的列表，第二个参数是我要向其借出映射到每个图表类型的单个函数的对象。
  2. 然后，我遍历了所需图表类型的列表，并向我的对象添加了要为该对象中的每个属性扩展的函数。这些函数只接受id、width和height。
  3. 每个图表类型的函数置于闭包下以保留图表类型。
  4. 调用每个图表的函数时，用于返回具有特定图表类型和其他参数的 FusionCharts 的新实例。
相关文章：