javascript - Highcharts - 从数组填充数据

Question

我想知道是否有人能明白为什么我的 Highcharts 代码不起作用？我多年来一直试图修复它，但无法让它工作。我看了这个问题Populate JSON object to highchart bar chart寻求帮助，但无法让我的代码工作。

    <?php 
    include('../connection.php');
    $selectCategory = "SELECT CategoryName, COUNT( fkDiaryCategory ) as count
    FROM    `tbldiary`, tbldiarycategories where pkCategory=fkDiaryCategory group by fkDiaryCategory";

    $catResult = mysqli_query($conn,$selectCategory);

    $tableRows = array();
    $i=0;
    while($dataRow = mysqli_fetch_array($catResult, MYSQLI_ASSOC)){
    $tableRows[$i]['CategoryName']=$dataRow['CategoryName'];
    $tableRows[$i]['count']=$dataRow['count'];
    $i++;
     };
     $data = (json_encode($tableRows));
     ?> 
    <script>

    var data = '<?php echo $data ?>';
    console.log(data);
    $(function() {
        // Populate series
        var processed_json = new Array();
        for (i = 0; i < data.length; i++) {
            processed_json.push([parseInt(data[i].count),data[i].CategoryName]);
        }

    $( document ).ready(function() {
        // draw chart
        var options={
            chart: {

               renderTo: 'container',                   
                type: "column"
            },
            title: {
                text: "Diary Entries by Category"
            },
            xAxis: {
                categories: data.CategoryName,
                title: {
                    text: "CategoryName"
                }
            },
            yAxis: {
              min:0,
                title: {
                    text: "Total"
                }
            },
            series: data
        };

        var chart = new Highcharts.Chart(options);
        });
    });
</script>
  <div id="container" style="height: 300px"></div>
</body>
</html>

我的讲师帮助使用 while 循环填充processed_json 数组，我不是 100% 确定是否需要这样做，但我把它留在了以防万一。提前致谢!

编辑添加:

当你执行 console.log 时，我输入的数据看起来像这样 [{"CategoryName":"家庭生活烦恼","count":"2"},{"CategoryName":"社交生活烦恼","count":"2"},{"CategoryName":"考试压力","count":"1"},{"CategoryName":"大学生活压力","count":"1"},{"CategoryName":"工作压力","count":"1"}]

Answer 1

如果您的数据与您在评论中发布的数据相同，那么您正在解析系列数据，而不是系列本身。如果您为每个点设置名称，则为 xAxis 设置category 类型将强制图表使用点的名称作为类别。

示例:http://jsfiddle.net/7nLz2b8d/1/

var data = [{
  "CategoryName": "Home life worries",
  "count": "2"
}, {
  "CategoryName": "Social life worries",
  "count": "2"
}, {
  "CategoryName": "Exam stress",
  "count": "1"
}, {
  "CategoryName": "University life stress",
  "count": "1"
}, {
  "CategoryName": "Work stress",
  "count": "1"
}];

$(function() {
  // Populate series
  var processed_json = [],
      len = data.length;

  for (i = 0; i < len; i++) {
    processed_json.push([data[i].CategoryName, parseInt(data[i].count)]);
  }

  $(document).ready(function() {
    // draw chart
    var options = {
      chart: {
        renderTo: 'container',
        type: "column"
      },
      title: {
        text: "Diary Entries by Category"
      },
      xAxis: {
        type: 'category',
        title: {
          text: "CategoryName"
        }
      },
      yAxis: {
        min: 0,
        title: {
          text: "Total"
        }
      },
      series: [{
        data: processed_json
      }]
    };

    var chart = new Highcharts.Chart(options);

  });
});