javascript - 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循环填充了created_json数组，我不确定100％是否需要这样做，但我以防万一。提前致谢！

编辑添加：

当您执行console.log时，我输入的数据如下所示
[{“ CategoryName”：“家庭生活困扰”，“ count”：“ 2”}，{“ CategoryName”：“社会生活困扰”，“ count”：“ 2”}，{“ CategoryName”：“考试压力” ，“ count”：“ 1”}，{“ CategoryName”：“大学生活压力”，“ count”：“ 1”}，{“ CategoryName”：“工作压力”，“ count”：“ 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);

  });
});

关于javascript - Highcharts -从数组填充数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36138131/