我有一个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
属性组成类别。
现在我很困惑如何为图表构建系列,以便正确地对每个项目进行分组。我期待一个类似于演示this或this的图表。
与演示样本相比的差异在于我的类别具有不同数量的对象。谷物谷物中只有一个项目,绿叶蔬菜中 5 ,水果中 8 等。所以当我绘制时会有不同数量的每个类别的列/堆栈。在演示中,类别的列/堆数相同。