Fusionchart 没有图表只有空白 space

Question

我正在尝试使用 this guide 创建多系列 fusionchart。

我有 JSON 文件 $jsonEncodedData，它是从数组 $arrData 创建的，并且 new FusionCharts("msline", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData) 我正试图将它隐藏到图表中。

我的代码：

<?php
include("fusioncharts/fusioncharts.php");
?>
<html>
<head>
<script type="text/javascript" src="fusioncharts/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts/js/themes/fusioncharts.theme.fint.js"></script>
</head>
<body>
<?php 
$jsonEncodedData = json_encode($arrData);
$Chart = new FusionCharts("msline", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData);
$Chart->render();
?>
<div id="chart-1">Fusion Charts will render here</div>
</body>
</html>

我的 JSON 文件：

{
"chart":{
"caption":"Number of visitors last week",
"subCaption":"Bakersfield Central vs Los Angeles Topanga",
"captionFontSize":"14",
"subcaptionFontSize":"14",
"subcaptionFontBold":"0",
"paletteColors":"#0075c2,#1aaf5d,#FF5733,#33B5FF",
"bgcolor":"#ffffff",
"showBorder":"0",
"showShadow":"0",
"showCanvasBorder":"0",
"usePlotGradientColor":"0",
"legendBorderAlpha":"0",
"legendShadow":"0",
"showAxisLines":"0",
"showAlternateHGridColor":"0",
"divlineThickness":"1",
"divLineDashed":"1",
"divLineDashLen":"1",
"xAxisName":"Day",
"showValues":"0"
},
"categories":{
"category":[
{
"label":"N.12\/02"
},
{
"label":"Pn.13\/02"
},
{
"label":"Wt.14\/02"
},
{
"label":"\u015ar.15\/02"
},
{
"label":"Cz.16\/02"
},
{
"label":"Pt.17\/02"
},
{
"label":"So.18\/02"
}
]
},
"dataset":[
{
"seriesname":"IRDN",
"data":[
{
"value":"142.59"
},
{
"value":"174.88"
},
{
"value":"176.97"
},
{
"value":"182.48"
},
{
"value":"160.15"
},
{
"value":"160.72"
},
{
"value":"165.47"
}
]
},
{
"seriesname":"SIRDN",
"data":[
{
"value":"148.81"
},
{
"value":"197.29"
},
{
"value":"202.27"
},
{
"value":"211.93"
},
{
"value":"177.87"
},
{
"value":"179.37"
},
{
"value":"177.69"
}
]
},
{
"seriesname":"IRDN24",
"data":[
{
"value":"140.31"
},
{
"value":"174.50"
},
{
"value":"180.38"
},
{
"value":"187.70"
},
{
"value":"161.91"
},
{
"value":"161.62"
},
{
"value":"160.98"
}
]
},
{
"seriesname":"IRDN 8.22",
"data":[
{
"value":"147.33"
},
{
"value":"197.02"
},
{
"value":"202.21"
},
{
"value":"211.28"
},
{
"value":"178.11"
},
{
"value":"179.32"
},
{
"value":"176.31"
}
]
}
]
}

尽管看起来正确的图表不起作用（我得到空白 space 没有任何错误，甚至图表应该出现的文本 <div id="chart-1">Fusion Charts will render here</div> 也消失了。我检查了调试器，我的进程在 12 步中的第 9 步停止 http://www.fusioncharts.com/dev/api/fusioncharts/namespaces/debugger.html:

#1 [FusionCharts] fired "ready" event.
#2 [myChart] fired "beforeinitialize" event.
#3 [myChart] fired "beforedataupdate" event.
#4 [myChart] fired "dataupdated" event.
#5 [myChart] fired "initialized" event.
#6 [myChart] fired "beforerender" event.
#7 [myChart] fired "internal.loaded" event.
#8 [myChart] fired "internal.drawstart" event.
#9 [myChart] fired "dataloaded" event.

这可能是什么原因？

编辑感谢@uom-pgregorio，我发现了我的错误。

在JSON中 'category'应该在另外的[]:

"categories": [{
        "category": [{
            "label": "Mon"
        }, {
            "label": "Tue"
        }, {
            "label": "Wed"
        }, {
            "label": "Thu"
        }, {
            "label": "Fri"
        }, {
            "label": "Sat"
        }, {
            "label": "Sun"
        }]
    }],

而不是：

"categories": {
        "category": [{
            "label": "Mon"
        }, {
            "label": "Tue"
        }, {
            "label": "Wed"
        }, {
            "label": "Thu"
        }, {
            "label": "Fri"
        }, {
            "label": "Sat"
        }, {
            "label": "Sun"
        }]
    },

Answer 1

Updating my answer because you provided a different guide.

据我所知，您忘记执行此步骤了：

/**
 * Convert the data in the `$actualData` array into a format that can be
 * consumed by FusionCharts. The data for the chart should be in an array
 * wherein each element of the array is a JSON object having the "label"
 * and “value” as keys.
 */
$arrData['data'] = array();
// Iterate through the data in `$actualData` and insert in to the `$arrData` array.
foreach ($actualData as $key => $value) {
  array_push($arrData['data'],
    array(
      'label' => $key,
      'value' => $value
    )
  );
}

更新#1

我注意到您的 JSON 中已经 hard-coded 但您只包含了 value 而没有 label。您缺少 label 元素。

更新#2

基本上您的 JSON 格式需要：

{
    "chart": {
        "caption": "Split of Visitors by Age Group",
        "subCaption": "Last year",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "use3DLighting": "0",
        "showShadow": "0",
        "enableSmartLabels": "0",
        "startingAngle": "0",
        "showPercentValues": "1",
        "showPercentInTooltip": "0",
        "decimals": "1",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "showHoverEffect": "1",
        "showLegend": "1",
        "legendBgColor": "#ffffff",
        "legendBorderAlpha": "0",
        "legendShadow": "0",
        "legendItemFontSize": "10",
        "legendItemFontColor": "#666666",
        "useDataPlotColorForLabels": "1"
    },
    "data": [
        {
            "label": "Teenage",
            "value": "1250400"
        },
        {
            "label": "Adult",
            "value": "1463300"
        },
        {
            "label": "Mid-age",
            "value": "1050700"
        },
        {
            "label": "Senior",
            "value": "491000"
        }
    ]
}

Fusionchart 没有图表只有空白 space

Fusionchart no chart only blank space

php

arrays

json

fusioncharts

更新#1

更新#2