Highchart Column中没有显示任何内容

时间：2017-03-18 23:04:04

标签： php mysql json highcharts

我试图显示每个单独作业的平均成绩，但我没有运气在Highchart专栏中显示。它只显示图例和＆＃34;图表应为＆＃34;。

我有我的div <div id="container"></div>以及必要的SQL代码：

$row=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                    from score s
                                        INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                        INNER JOIN module m ON r.module_id = m.module_id
                                    WHERE r.module_id = 7
                                    GROUP BY r.due_date asc;");

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var options = {
            chart: {
                renderTo: 'container',
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            title: {
                text: 'Revenue vs. Overhead',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: []
            },
            yAxis: {
                title: {
                    text: 'Amount'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                        this.x +': '+ this.y;
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -10,
                y: 100,
                borderWidth: 0
            },
            series: []
        }

        $.getJSON("avg_grades.json", function(json) {
            options.xAxis.categories = json[0]['Assignments'];
            options.series[0] = json[1];
            chart = new Highcharts.Chart(options);
        });
    });
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>
<?php
$db=new PDO('mysql:dbname=attendance_database;host=localhost;','user','password');
$row=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");
$row2=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");
$row3=$db->prepare ("SELECT r.due_date as Due, m.module_name as Module, r.ass_name as Assignment, avg(amount) as Grade
                                        from score s
                                            INNER JOIN assignment r ON s.assignment_id = r.ass_id
                                            INNER JOIN module m ON r.module_id = m.module_id
                                        WHERE r.module_id = 7
                                        GROUP BY r.due_date asc;");

$row->execute();
###############################
$json_data=array();
$json_data['name'] = 'Assignments';
foreach($row as $rec)
{
    $json_data['value'][]=$rec['Assignment'];
}
##########################
$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=$rec2['Grade'];
}

$result = array();
array_push($result,$json_data);
array_push($result,$json_data2);

$fp = fopen("avg_grades.json", "w");
fwrite($fp, json_encode($result));
fclose($fp);

echo json_encode($result);
?>

预期结果

＆＃13;
＆＃13; 
Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Monthly Average Rainfall'
    },
    subtitle: {
        text: 'Source: WorldClimate.com'
    },
    xAxis: {
        categories: [
            'Find Hidden Data',
            'Google Hacking',
            'Caine Testing',
            'Penetration Testing',
            'FA 2'
        ],
        crosshair: true
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Grades %'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: [{
        name: 'Avg Grade',
        data: [99, 70,80, 47.5, 70, 40]

    }]
});
＆＃13; 
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
＆＃13;
＆＃13;
＆＃13;

实际结果

Actual outcome

1 个答案:

答案 0 :(得分：1)

实际问题在于php $json_data2;

而不是

$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=$rec2['Grade'];
}

应该是

$json_data2=array();
$json_data2['name'] = 'Grade';
$row2->execute();
foreach($row2 as $rec2)
{
    $json_data2['value'][]=intval($rec2['Grade']); /*intval()*/
}

这将导致正确的JSON字符串，其中包含数字数组而不是字符串数组

最终输出[{"name":"Assignments","value":["Find Hidden Data","Google Hacking","Caine Testing","Penetration Testing","FA 2"]},{"name":"Grade","value":[99,70,80,47.5,70,40]}]

在您当前的JSON字符串中， 这是演示，以显示字符串["99", "70","80", "47.5", "70", "40"]的数组何时转换为数字数组[99, 70,80, 47.5, 70, 40]，然后只有图表按预期工作

var data = [{
  "name": "Assignments",
  "value": ["Find Hidden Data", "Google Hacking", "Caine Testing", "Penetration Testing", "FA 2"]
}, {
  "name": "Grade",
  "value": ["99", "70", "80", "47.5", "70", "40"]
}]
/*problem is here in second object value having array of string*/
var categories, datasN
for (var i = 0; i < data.length; i++) {
  if (data[i].name == "Assignments") {
    categories = data[i].value
  }
  if (data[i].name == "Grade") {
    datasN = data[i].value.map(Number) /*converting string array to number array*/
   
  }
}

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    categories: categories,
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Grades %'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
    name: 'Avg Grade',
    data: datasN

  }]
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

希望这能给你足够的解释

相关问题
最新问题