duanbi3385 2017-02-16 19:34 采纳率: 100%
浏览 88
已采纳

Fusionchart没有图表只有空格

I am trying to create multi-series fusionchart using this guide.

I have JSON file $jsonEncodedData which is created from array $arrData and with new FusionCharts("msline", "myFirstChart" , 600, 300, "chart-1", "json", $jsonEncodedData) I am trying to covert it into the chart.

My code:

<?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>

MY JSON file:

{
"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"
}
]
}
]
}

Eventhough it looks correct chart doesn't work (I got blank space without any errors, even text where the graph should appear <div id="chart-1">Fusion Charts will render here</div> disappears. I have checked debugger and my proces stops on step 9 out of 12 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.

What can be a reason for that?

EDIT Thanks to @uom-pgregorio I have found my mistake.

In JSON 'category' should be in aditional []:

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

instead of:

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

1条回答 默认 最新

  • dou7466 2017-02-17 19:23
    关注

    Updating my answer because you provided a different guide.

    From what I can see you forgot to do this step:

    /**
     * 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
        )
      );
    }
    

    Update #1

    I noticed you already have it hard-coded in your JSON but all you included is the value and no label. You're missing the label element.

    Update #2

    Basically you need to have your JSON in this format:

    {
        "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"
            }
        ]
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 arduino控制ps2手柄一直报错
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥85 maple软件,solve求反函数,出现rootof怎么办?
  • ¥15 求chat4.0解答一道线性规划题,用lingo编程运行,第一问要求写出数学模型和lingo语言编程模型,第二问第三问解答就行,我的ddl要到了谁来求了
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿
  • ¥100 关于使用MATLAB中copularnd函数的问题