0

这是我的 Json 

[{"name":"Male","data":[10,34,30]},{"name":"Female","data":[20,22,15]},{"name":"Male","data":[22,21,21]},{"name":"Female","data":[13,20,31]}]

然后推它来创建图表，我做错了，这里是我的代码：

  <!DOCTYPE HTML>
     <html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"  type="text/javascript"></script>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.3.5/jquery.min.js"></script>
    <script type="text/javascript">



          /*  var items = [{
                "name": "Male",
                "data": [10, 34, 30]
            }, {
                "name": "Female",
                "data": [20, 22, 15]

            }];*/

                var chart;
        $(document).ready(function () {
            //define the options
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'bar'
                },
                title: {
                    text: 'Historic World Population by Region'
                },
                subtitle: {
                    text: 'Source: Wikipedia.org'
                },
                xAxis: {
                    categories: ['Age 20-24', 'Age 25-30', 'Age 30-40'],
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    min: 0,
                    title: {
                        text: 'Population (millions)',
                        align: 'high'
                    },
                    labels: {
                        overflow: 'justify'
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '' +
                            this.series.name + ': ' + this.y + ' millions';
                    }
                },
                plotOptions: {
                    bar: {
                        dataLabels: {
                            enabled: true
                        }
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 100,
                    floating: true,
                    borderWidth: 1,
                    backgroundColor: '#FFFFFF',
                    shadow: true
                },
                credits: {
                    enabled: false
                },
                series: [{

                }]
            };


            //Calls the JSON
            jQuery.getJSON("XSportWithAgegroup",
                            null, function (items) {
                                //Creates the new series as stated in the documentation
                                //http://www.highcharts.com/ref/#series
                                var series = {

                                    name: 'Browser Share',
                                    data: []
                                };
                                jQuery.each(items, function (itemNo, item) {
                                    //Get the items from the JSON and add then
                                    //to the data array of the series



                                        series.data.push({
                                            name: item.name,
                                            y: item.data[0],
                                        })

                                });
                                options.series.push(series);
                                //Create the chart
                                chart = new Highcharts.Chart(options);
                                chart.render();
                            });
        });

    </script>
</head>
<body>

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>

     <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

</body>

这是我将查询结果转换为 json 的方法：

 public JsonResult XSportWithAgegroup() { 

       var series = (from m in db.Agegroup
                     where m.Gender == "Male" || m.Gender == "Female"
                     select new
                     {
                         name = m.Gender,
                         data = new List<double> { m.Age20To24, m.Age25To30, m.Age30To40 }
                     }).ToArray();

       return Json(series, JsonRequestBehavior.AllowGet);

    }

我认为我的问题在于 jQuery，图表的演示是：http ://www.highcharts.com/demo/bar-basic

更新 ：

我的json：

   [{"name":"Male","data":[10,34,30]},{"name":"Female","data":[20,22,15]}]

我的查询：

    //Calls the JSON
            jQuery.getJSON("XDiesesWithAgegroup",
                            null, function (items) {
                                //Creates the new series as stated in the documentation
                                //http://www.highcharts.com/ref/#series
                                var series = { name: 'll', data: [] };




                                jQuery.each(items, function (itemNo, item) {
                                    //Get the items from the JSON and add then
                                    //to the data array of the series


                                    for (i = 0; i <= 3; i++){
                                        series.data.push({
                                            name: item.name,
                                            y: item.data[i],
                                        });


                                  }//end for

                                });

                                options.series.push(series);

                                //Create the chart
                                chart = new Highcharts.Chart(options);
                                chart.render();

                            });

这里图表现在的样子：

http://i.stack.imgur.com/ER6BZ.png

4

1 回答 1

0

您的 JSON 数组中没有属性Gender，只有name. 您可以更改您的 JSON 数据以Gender代替使用，也可以反过来name更改您的代码

series.data.push({
    name: item.name,
    y: item.data[i],
});

您发布的代码有几点。当您查看控制台时，它们都会显示出来。我将代码复制到JSFiddle并与Highcharts - How To Use一起，我对其进行了一些修改

y: item.data[i],:i未定义。我只拿了第一个元素

series.data.push({
    name: item.Gender,
    y: item.data[0],
})

options未定义且图表没有目标

HTML：

<div id="container"></div>

JS：

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

我认为重点是，您必须为要呈现的图表提供目标。

更新：

将您的数据与您提供的链接进行比较，我只是删除了循环并将您的 JSON 数据直接分配给series. 结合条形图，图表开始看起来很相似。

var options = {
    chart: { renderTo: 'container', type: 'bar' },
    series: items
};

见JSFiddle

更新 2：

因此，您只有两个条目，Male并且Female，每个条目都有三个子条目。Y 轴标记为Age 20-24，Age 25-30并且Age 30-40。

var options = {
    chart: { renderTo: 'container', type: 'bar' },
    xAxis: {
                categories: ['Age 20-24', 'Age 25-30', 'Age 30-40'],
                title: {
                    text: null
                }
            },
    series: items
};

JSFiddle

更新 3：

var options = {
    chart: { renderTo: 'container', type: 'bar' },
    xAxis: {
                categories: ['Age 20-24', 'Age 25-30', 'Age 30-40'],
                title: {
                    text: null
                }
            },
    series: null
};

jQuery.getJSON("XDiesesWithAgegroup", function (items) {
    options.series = items;

    //Create the chart
    chart = new Highcharts.Chart(options);
});
于 2013-02-02T14:42:46.927 回答