Question

我正在关注这个例子 https://www.highcharts.com/docs/chart-and-series-types/pie-chart 我想通过从数据库中检索数据来显示highcharts。虽然我没有收到任何错误，但我的饼图高显示没有显示。我正在从数据库mysql中检索数据。这是我的代码

         $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container2',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'diseas Per area'
                    },
                    // tooltip: {
                        // formatter: function() {
                            // return '<b>' + this.point.name + '</b>: ' + this.y+ 'd Count';
                        // }
                    // },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                color: '#000000',
                                connectorColor: '#000000',
                                formatter: function() {
                                    return '<b>' + this.point.name + '</b>: ' + this.y;
                                }
                            },
                            showInLegend: true
                        }
                    },
                    series: []
                };

                $.getJSON("fcount.php", function(json) {
                    options.series = json;
                    chart = new Highcharts.Chart(options);
                });
            });

<div id="container2" style="height: 550px; min-width: 310px; max-width:800px; margin: 0 auto"></div>

<script src="http://code.highcharts.com/highcharts.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请告诉我我做错了什么。它没有显示任何错误，但仍然没有显示

我的PHP代码是

<?php
$con=mysqli_connect("localhost","root","","test");

// Check connection
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysql_query("SELECT `Area` AS Zone, COUNT( `Diease` ) AS problem FROM table  GROUP BY `Area` ");

//$rows = array();
$rows['type'] = 'pie';
$rows['name'] = 'Diease Count';
//$rows['innerSize'] = '50%';
while ($r = mysql_fetch_array($result)) {
    $rows['data'][] = array('zone '.$r['area'].'"', $r['problem']);    
}
$rslt = array();
array_push($rslt,$rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

mysql_close($con);

Answer 1

而不是将数组推入像这样的空数组

$rslt = array();
array_push($rslt,$rows);
print json_encode($rslt, JSON_NUMERIC_CHECK);

使用它如下

echo json_encode($rows);

Answer 2

缺少数据可能是由options.series的格式引起的。使用饼图时，series的格式应如下：

options.series = [{ name: 'Browsers', 
                   data: [ ["Firefox",60] , ["Chrome",40]]
                 }]

在this JSFiddle中，我使用您的选项代码生成图表。因此，如果您的options.series如上图所示，则图表应该有效。

highcharts似乎没有呈现

2 个答案: