将 JSON 对象填充到 highchart 条形图答案

【问题标题】：Populate JSON object to highchart bar chart将 JSON 对象填充到 highchart 条形图
【发布时间】：2013-12-29 05:57:03
【问题描述】：

我是将 JSON 对象解析为 highchart 的新手，我想绘制基本条形图。我已经完成了图表的标题。问题是我想显示的系列没有显示。（计为系列，qpAnswer 为 xAxis）。

这是我的 JSON 数据

[
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "1",
    qpAnswer: "Yes",
    count: "0"
  },
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "2",
    qpAnswer: "No",
    count: "0"
  },
  {
    qpQuestion: "Is that a dog?",
    qpAnswerId: "3",
    qpAnswer: "ok",
    count: "0"
  }
]

这是我的 JS

var url="sections.php?request=graph";
        $.getJSON(url,function(data1){

            var options={
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text: data1[0].qpQuestion
                },
                xAxis:{
                    categories: data1.qpAnswer
                    title: {
                        text: 'Answer'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Answer Count'
                    }
                }, 
                series:data1
           };

           var chart = new Highcharts.Chart(options);
       });

【问题讨论】：

我可以帮助您的一件事是能够查看您的 JSON 的外观。如果您使用这里的工具 => json.parser.online.fr。在此处输入您的 JSON，您将更好地了解它的实际外观。

标签： javascript json highcharts

【解决方案1】：

您可以对数据进行预处理以形成类似的形式

var answers = ['Yes','No' ,'OK'];
var answer_counts= [
            {name: 'Yes', data : [2,0,0]},
            {name: 'No', data: [0,3,0]},
            {name: 'OK', data: [0,0,1]} ];

然后绘制它

var options={
                chart: {
                    renderTo: 'container',
                    type: 'column'
                },
                title: {
                    text:'QA Answers'
                },
                xAxis:{
                    categories: answers,
                    title: {
                        text: 'Answer'
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Answer Count'
                    }
                }, 
                series:answer_counts
           };

var chart = new Highcharts.Chart(options);

我已经完成了，http://jsfiddle.net/gwC2V/1/

如果有帮助，请告诉我们。

【讨论】：

这真是太棒了。我对条形之间的差距有一点疑问，因为值为 2,0,0，差距来自 0 值。是否有可能消除这些差距？
我只是使用 column-drilldown 而不是 basic :)

【解决方案2】：

下面的例子可以帮助你

JSON 文件

[
    [1,12],
    [2,5],
    [3,18],
    [4,13],
    [5,7],
    [6,4],
    [7,9],
    [8,10],
    [9,15],
    [10,22]
]

使用 getJSON() 从 JSON 文件中检索数据并填充到 CHART

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });

});

这里是link

【讨论】：

最好给出拒绝投票的理由，我理解我的错误。