我正在尝试生成融合图。在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>
但它是看不见的。为什么？我需要怎么做才能正确显示它？
最佳答案
根据您的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>