Question

我正在尝试使用this guide创建多系列融合图。

我有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>

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

尽管它看起来正确，但图表无法正常工作（我得到的空白没有任何错误，即使图形显示<div id="chart-1">Fusion Charts will render here</div>的文本也会消失。我检查了调试器，我的进程在12 http://www.fusioncharts.com/dev/api/fusioncharts/namespaces/debugger.html中的第9步停止了：

#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'中应该是aditional []：

"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

更新我的答案，因为您提供了不同的指南。

从我所看到的，你忘记了这一步：

/**
 * 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中对其进行了硬编码，但您所包含的只有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没有图表只有空格

1 个答案:

更新＃1

更新＃2