高圖表-從數組填充數據

Question

我想知道是否有人可以看到為什么我的高位圖表代碼無法正常工作？ 我一直試圖修復它，但我無法使其正常工作。 我看着這個問題將JSON對象填充到highchart條形圖中尋求幫助，但無法使我的代碼正常工作。

    <?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”： “工作壓力”，“計數”：“ 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);

  });
});

Answer 2

這是示例代碼
和孔的例子

 $(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Column chart with negative values'
            },
            xAxis: {
                categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'John',
                data: [5, 3, 4, 7, 2]
            }, {
                name: 'Jane',
                data: [2, -2, -3, 2, 1]
            }, {
                name: 'Joe',
                data: [3, 4, 4, -2, 5]
            }]
        });
    });