Question

我想知道是否有人能够理解为什么我的高级图表代码不起作用？我一直试图解决它多年，我不能让它工作。我查看了这个问题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>

我的讲师帮助填充processed_json数组的while循环，我不是100％确定是否需要这个但我只是把它留在了。提前谢谢！

编辑添加：

当你执行console.log时，我输入的数据看起来像这样 [{“CategoryName”：“家庭生活担忧”，“计数”：“2”}，{“CategoryName”：“社交生活忧虑”，“计数”：“2”}，{“CategoryName”：“考试压力” ，“count”：“1”}，{“CategoryName”：“大学生活压力”，“计数”：“1”}，{“CategoryName”：“工作压力”，“计数”：“1”}] < / p>

Answer 1

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

示例：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

以下是示例代码
And hole example

 $(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]
            }]
        });
    });

高图表 - 从数组填充数据

2 个答案: