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 个答案: