Fusionchart已加载，但我看不到-javascript

Question

我正在尝试生成融合图。 在Fusionchart网站之后，我做了所有我认为必要的步骤。

在标题中，我包括了这两个文件

<script type="text/javascript" src="<?=APP_URL?>corporate/include/base/fusioncharts.js"></script>
<script type="text/javascript" src="<?=APP_URL?>corporate/include/base/fusioncharts.theme.fint.js"></script>

该函数如下所示

function getGraph(){

    var revenueChart = new FusionCharts({
        "type": "column2d",
        "renderAt": "chartContainer",
        "width": "500",
        "height": "300",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
    });

    revenueChart.render();

}

我要显示div的页面如下所示

<h1><?=$headline;?></h1>
<div style=" height:100%; width: 100%; float: left;" id="main-dashboard">
     <div class="add-goal" onclick="insertGoal()">
       <i class="fa fa-plus fa-2x" style="color: black"></i>
     </div>
<div id="chartContainer">FusionCharts XT will load here!</div>

执行后，图表似乎确实已加载，但我看不到。 当我使用开发人员工具检查元素时，这就是我在“ chartContainer” div中看到的内容

<span id="chartobject-1" class="fusioncharts-container" style="position: relative; text-align: left; line-height: normal; display: inline-block; zoom: 1; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: none; direction: ltr; width: 500px; height: 300px;"></span>

但它是看不见的。 为什么？ 我需要怎么做才能正确显示它？

Answer 1

根据您的dataSource对象，column2D图表在我的末端完美呈现。 不知道您身边的问题是什么。 请找到下面的代码。

    <html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="js/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript">


FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
  "type": "column2d",  
  "renderAt": "chartContainer",
  "width": "500",
  "height": "300",
  "dataFormat": "json",
  "dataSource": {
            "chart": {
                "caption": "Monthly revenue for last year",
                "subCaption": "Harry's SuperMart",
                "xAxisName": "Month",
                "yAxisName": "Revenues (In USD)",
                "theme": "fint"
            },
            "data": [
                {
                    "label": "Jan",
                    "value": "420000"
                },
                {
                    "label": "Feb",
                    "value": "810000"
                },
                {
                    "label": "Mar",
                    "value": "720000"
                },
                {
                    "label": "Apr",
                    "value": "550000"
                },
                {
                    "label": "May",
                    "value": "910000"
                },
                {
                    "label": "Jun",
                    "value": "510000"
                },
                {
                    "label": "Jul",
                    "value": "680000"
                },
                {
                    "label": "Aug",
                    "value": "620000"
                },
                {
                    "label": "Sep",
                    "value": "610000"
                },
                {
                    "label": "Oct",
                    "value": "490000"
                },
                {
                    "label": "Nov",
                    "value": "900000"
                },
                {
                    "label": "Dec",
                    "value": "730000"
                }
            ]
        }
});

revenueChart.render();

});


</script>
</head>
<body>
  <!-- <div id="chartContainer">FusionCharts XT will load here!</div> -->

  <div style=" height:100%; width: 100%; float: left;" id="main-dashboard">
     <div class="add-goal" onclick="insertGoal()">
       <i class="fa fa-plus fa-2x" style="color: black"></i>
     </div>
<div id="chartContainer">FusionCharts XT will load here!</div>
</body>
</html>

Fusionchart已加载，但我看不到-javascript

问题描述

1 个解决方案

解决方案1
3 2015-10-26 13:27:50

Fusionchart已加载，但我看不到-javascript

问题描述

1 个解决方案

解决方案1 3 2015-10-26 13:27:50

解决方案1
3 2015-10-26 13:27:50