文章/答案/技术大牛

发布

社区首页 >问答首页 >从JSON创建高级图表-列类型

问从JSON创建高级图表-列类型
EN

Stack Overflow用户

提问于 2015-11-20 18:34:47

回答 1查看 764关注 0票数 0

我试图使用来自json的以下格式的数据创建一个列类型json图表：

[{"id":7,"dateV":"2015-11-16","count":10},{"id":6,"dateV":"2015-11-15","count":3},{"id":5,"dateV":"2015-11-14","count":15},{"id":4,"dateV":"2015-11-13","count":10},{"id":3,"dateV":"2015-11-12","count":6},{"id":2,"dateV":"2015-11-11","count":8},{"id":1,"dateV":"2015-11-10","count":5}]

X轴应该显示日期值，Y轴应该显示计数。不知何故，我无法以所需的格式转换此JSON。

这是我的密码。

<script type="text/javascript">
        $('#myButton').click(function() {
            var options = {
                    chart: {
                        renderTo: 'chartContainerDiv',
                        type: 'column'
                    },
                    series: [{}]
                };

                var url = "callToControllerURL";
                $.getJSON(url,  function(data) {
                    console.log(JSON.stringify(data));
                    options.series[0].data = JSON.stringify(data);
                    var chart = new Highcharts.Chart(options);
                });
            });
    </script>

控制台日志以上面指定的格式显示JSON。我猜我必须从选项数组中形成x和y轴值。我该怎么做？

json

highcharts

column-chart

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-21 13:55:02

您需要迭代json数据，并通过推送值来创建类别数据和序列。

var jsonData = [{"id":7,"dateV":"2015-11-16","count":10},{"id":6,"dateV":"2015-11-15","count":3},{"id":5,"dateV":"2015-11-14","count":15},{"id":4,"dateV":"2015-11-13","count":10},{"id":3,"dateV":"2015-11-12","count":6},{"id":2,"dateV":"2015-11-11","count":8},{"id":1,"dateV":"2015-11-10","count":5}]; 

 var categoryData= [];
 var seriesData= [];
$.each(jsonData, function(i,item){
seriesData.push(jsonData[i].count);
categoryData.push(jsonData[i].dateV);
console.log("seriesData"+JSON.stringify(seriesData));
});

请参阅在这里用你的json做演示

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33833711

复制

相似问题

问从JSON创建高级图表-列类型
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从JSON创建高级图表-列类型EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从JSON创建高级图表-列类型
EN