Highcharts - 具有不同系列大小的分组柱形图

时间:2017-03-31 19:55:45

标签: javascript json html5 highcharts

我有一个JSON数组,数组中的每个对象代表一个食物项目及其卡路里值,钙含量等。 使用Highcharts我想绘制一个图表,以显示按类型分组的每种食品的钙含量。 因此,我的Y轴将是食品中存在的钙含量,X轴将是食品类型。

我在http://www.highcharts.com/demo中看到了分组/堆积图表的示例,但我无法将我的JSON aray映射到高图需要的系列格式。

以下是类别数组(这需要是我的X轴类别)

categories = ['Cereal Grains', 'Leafy Vegitables', 'Nuts and Seeds', 'Fruits', 'Roots and Tubers', 'Sea Foods', 'Sugars', 'Milk Products', 'Meat and Poultry', 'Condiments and Spices', 'Pulse and Legumes']

实际的JSON数组如下

[
  {
    'type': 'Cereal Grains',
    'item': 'Rice Flakes',
    'energy': 346,
    'calcium': 20,
    'iron': 20
  },
  {
    'type': 'Leafy Vegitables',
    'item': 'Agathi',
    'energy': 93,
    'calcium': 1130,
    'iron': 4
  },
  {
    'type': 'Leafy Vegitables',
    'item': 'Cabbage',
    'energy': 27,
    'calcium': 39,
    'iron': 1
  },
  {
    'type': 'Leafy Vegitables',
    'item': 'Lettuce',
    'energy': 21,
    'calcium': 50,
    'iron': 2
  },
  {
    'type': 'Leafy Vegitables',
    'item': 'Spinach',
    'energy': 26,
    'calcium': 73,
    'iron': 1
  },
  {
    'type': 'Leafy Vegitables',
    'item': 'Celery',
    'energy': 37,
    'calcium': 230,
    'iron': 6
  },
  {
    'type': 'Nuts and Seeds',
    'item': 'Almond',
    'energy': 655,
    'calcium': 230,
    'iron': 5
  },
  {
    'type': 'Nuts and Seeds',
    'item': 'GroundNut',
    'energy': 567,
    'calcium': 90,
    'iron': 2
  },
  {
    'type': 'Nuts and Seeds',
    'item': 'Cashewnut',
    'energy': 596,
    'calcium': 450,
    'iron': 6
  },
  {
    'type': 'Nuts and Seeds',
    'item': 'Walnut',
    'energy': 687,
    'calcium': 100,
    'iron': 3
  },
  {
    'type': 'Fruits',
    'item': 'Sapota',
    'energy': 98,
    'calcium': 28,
    'iron': 1
  },
  {
    'type': 'Fruits',
    'item': 'seethaphal',
    'energy': 104,
    'calcium': 17,
    'iron': 4
  },
  {
    'type': 'Fruits',
    'item': 'Pomegranate',
    'energy': 65,
    'calcium': 10,
    'iron': 2
  },
  {
    'type': 'Fruits',
    'item': 'Pine Apple',
    'energy': 46,
    'calcium': 9,
    'iron': 2
  },
  {
    'type': 'Fruits',
    'item': 'Lichi',
    'energy': 61,
    'calcium': 10,
    'iron': 1
  },
  {
    'type': 'Fruits',
    'item': 'Apple',
    'energy': 59,
    'calcium': 10,
    'iron': 1
  },
  {
    'type': 'Fruits',
    'item': 'Red Cherry',
    'energy': 64,
    'calcium': 24,
    'iron': 0
  },
  {
    'type': 'Fruits',
    'item': 'Water Melon',
    'energy': 16,
    'calcium': 11,
    'iron': 8
  },
  {
    'type': 'Roots and Tubers',
    'item': 'Carrot',
    'energy': 48,
    'calcium': 80,
    'iron': 1
  },
  {
    'type': 'Roots and Tubers',
    'item': 'Potato',
    'energy': 97,
    'calcium': 10,
    'iron': 0
  },
  {
    'type': 'Roots and Tubers',
    'item': 'Tapioca',
    'energy': 157,
    'calcium': 50,
    'iron': 1
  },
  {
    'type': 'Sea Foods',
    'item': 'Crab',
    'energy': 169,
    'calcium': 1606,
    'iron': 0
  },
  {
    'type': 'Sea Foods',
    'item': 'Prawn',
    'energy': 89,
    'calcium': 323,
    'iron': 5
  },
  {
    'type': 'Sea Foods',
    'item': 'Sardine',
    'energy': 101,
    'calcium': 90,
    'iron': 2
  },
  {
    'type': 'Sea Foods',
    'item': 'Mullet',
    'energy': 155,
    'calcium': 357,
    'iron': 4
  },
  {
    'type': 'Sugars',
    'item': 'Honey',
    'energy': 319,
    'calcium': 5,
    'iron': 1
  },
  {
    'type': 'Sugars',
    'item': 'Sago',
    'energy': 351,
    'calcium': 10,
    'iron': 1
  },
  {
    'type': 'Milk Products',
    'item': 'Cheese',
    'energy': 348,
    'calcium': 790,
    'iron': 2
  },
  {
    'type': 'Milk Products',
    'item': 'Curd',
    'energy': 60,
    'calcium': 149,
    'iron': 0
  },
  {
    'type': 'Milk Products',
    'item': 'Skimmed Milk',
    'energy': 29,
    'calcium': 120,
    'iron': 0
  },
  {
    'type': 'Meat and Poultry',
    'item': 'Egg-Duck',
    'energy': 181,
    'calcium': 70,
    'iron': 2
  },
  {
    'type': 'Meat and Poultry',
    'item': 'Egg-Hen',
    'energy': 173,
    'calcium': 60,
    'iron': 2
  },
  {
    'type': 'Meat and Poultry',
    'item': 'Pork',
    'energy': 114,
    'calcium': 30,
    'iron': 2
  },
  {
    'type': 'Meat and Poultry',
    'item': 'Mutton',
    'energy': 194,
    'calcium': 150,
    'iron': 2
  },
  {
    'type': 'Condiments and Spices',
    'item': 'Asafoetida',
    'energy': 297,
    'calcium': 690,
    'iron': 39
  },
  {
    'type': 'Condiments and Spices',
    'item': 'Cardamom',
    'energy': 229,
    'calcium': 130,
    'iron': 5
  },
  {
    'type': 'Condiments and Spices',
    'item': 'Fresh Ginger',
    'energy': 67,
    'calcium': 20,
    'iron': 3
  },
  {
    'type': 'Condiments and Spices',
    'item': 'Omum',
    'energy': 323,
    'calcium': 1525,
    'iron': 12
  },
  {
    'type': 'Condiments and Spices',
    'item': 'Garlic Dry',
    'energy': 145,
    'calcium': 30,
    'iron': 1
  },
  {
    'type': 'Pulse and Legumes',
    'item': 'Soyabean',
    'energy': 432,
    'calcium': 240,
    'iron': 10
  },
  {
    'type': 'Pulse and Legumes',
    'item': 'Lentil',
    'energy': 343,
    'calcium': 69,
    'iron': 7
  }
]

根据每个对象的type属性组成类别。 现在我很困惑如何为图表构建系列,以便正确地对每个项目进行分组。我期待一个类似于演示thisthis的图表。

与演示样本相比的差异在于我的类别具有不同数量的对象。谷物谷物中只有一个项目,绿叶蔬菜中 5 ,水果中 8 等。所以当我绘制时会有不同数量的每个类别的列/堆栈。在演示中,类别的列/堆数相同。

0 个答案:

没有答案