javascript - 设置 Highcharts 系列中使用的数据格式

标签 javascript json angularjs highcharts

您好,我正在尝试使用 Highcharts 制作堆积条形图,但数据必须格式化才能作为系列使用的方式让我感到困惑。

    series: [{
        name: 'John',
        data: [5]
    }, {
        name: 'ee',
        data: [2]
    }, {
        name: 'aa',
        data: [7]
    },{
        name: 'zz',
        data: [4]
    },{
        name: 'Joe',
        data: [3]
    }]

这就是他们网站上的堆叠条形图示例之一。我使用 $http.get() 最初从 Web 服务获取数据,采用 JSON 格式,如下所示:

{
  "id": 13,
  "name": "JohnSnow",
  "totalScore": 5.239947894580996,
  "models": [
    {
      "id": 0,
      "name": "Grey",
      "score": 75.5
    },
    {
      "id": 1,
      "name": "Black",
      "score": 1.2355425046127677
    },
    {
      "id": 2,
      "name": "Purple",
      "score": 24.0705126173457
    },
    {
      "id": 3,
      "name": "Teal",
      "score": 28.981312850901684
    },
    {
      "id": 4,
      "name": "Yellow",
      "score": 31.373482114014525
    },
    {
      "id": 5,
      "name": "Green",
      "score": 22.02040979235661
    },
    {
      "id": 6,
      "name": "Red",
      "score": 11.137161646416322
    },
    {
      "id": 7,
      "name": "Blue",
      "score": 25.83014182677578
    },
    {
      "id": 8,
      "name": "Orange",
      "score": 4.793888180490194
    }
  ]
}

我最初的方法是遍历 $http.get() 调用返回的数据,并将一个 JSON 对象添加到一个数组中,然后将其设置为等于但事实并非如此锻炼得太好了。还有哪些其他选项,或者是否有更简单的方法来获取它的格式。数据必须在网络服务上保持这种格式,因此不可能进行更改。我有一个笨蛋,我正在尝试开始工作 here .

最佳答案

有趣的问题,我通常使用 Angular.forEach 或一个名为 underscore 的库来处理 AngularJS 中的数据处理。这是 forEach 版本。

data = $http.get(); // suppose you have the data
result = [];
angular.forEach(data.models, function(item) {
    // simple way is to take item as the original form
    result.push(item); 
    // or do your own way
    result.push({
        name: item.name,
        data: [item.score]
    });
});

现在结果变量就是您现在想要的变量。

关于javascript - 设置 Highcharts 系列中使用的数据格式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30598379/

相关文章:

java - 复杂的json解析未找到java异常

json - 通过Angular JS获取外部json文件

angularjs - 创建具有可变元素类型的指令

javascript - boolean 对象有什么意义?

python - 如何以不同的名称序列化 Marshmallow 字段

javascript - 我可以在不弹出的情况下更改create-react-app中公共(public)文件夹的名称吗?

javascript - 如何恢复 Angular 1 Ng 模型的变化

javascript - 多个顺序的 fetch() Promise

javascript - 了解返回映射子组件的 React 功能组件

javascript - 检测来自子级(iframe)的窗口关闭命令