如何在HighCharts中为堆栈列图表格式化json数据
How to format my json data for stack column chart in HighCharts
这是我的json数据
var data = [
{"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
{"unit":"a", "status":"Working", "val":53.3066666666666667},
{"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
{"unit":"a", "status":"Transport", "val":5.1425000000000000},
{"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
{"unit":"b", "status":"Working", "val":212.6386111111111111},
{"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
{"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
unit
是类别
我希望数据可以按以下方式格式化,这样我就可以插入HighCharts:中的series
选项
series: [{
name: 'Stopped / Idle',
data: [21.2022222222222222, 334.7358333333333333]},
{
name: 'Working',
data: [53.3066666666666667, 212.6386111111111111]},
{
name: 'Headland Turning',
data: [0.04694444444444444444, 26.2955555555555556]},
{
name: 'Transport',
data: [5.1425000000000000, 0.00444444444444444444]}]
});
谢谢。
var data = [
{"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
{"unit":"a", "status":"Working", "val":53.3066666666666667},
{"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
{"unit":"a", "status":"Transport", "val":5.1425000000000000},
{"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
{"unit":"b", "status":"Working", "val":212.6386111111111111},
{"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
{"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
cat = 'Unit ' + data[i].unit;
if(xCategories.indexOf(cat) === -1){
xCategories[xCategories.length] = cat;
}
}
for(i = 0; i < data.length; i++){
if(seriesData){
var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
if(currSeries.length === 0){
currSeries = seriesData[seriesData.length] = {name: data[i].status, data: []};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {name: data[i].status, data: [data[i].val]}
}
}
现在您已经有了seriesData
和xCategories
,您可以使用类似的东西来实例化图表
chart = new Highchart({chart: {renderTo: 'chart-div',
type: 'column'
},
plotOptions: {column: {stacking: 'normal'}},
xAxis:{ categories: xCategories},
series: seriesData
});
编辑:这是jsFiddle:http://jsfiddle.net/sujay/UMeGS/
在HighCharts网站上,我导航到演示库>HighChart演示部分,然后单击页面左侧的堆叠列。从那里,他们有一个链接到带有演示的JSFiddle,从那里我看到了与您相关的两部分代码。
第一部分是HighChart对象的xAxis
属性。这是我把它改成的:
xAxis: {
categories: ['Unit A', 'Unit B']
}
这些将是您正在堆叠数据的每一列。
下一部分是series
属性。这是您将要绘制图形的数据传递到这些列中的位置。它看起来像这样:
series: [{
name: 'Stopped / Idle',
data: [21.2022222222222222, 334.7358333333333333]
}, {
name: 'Working',
data: [53.3066666666666667, 212.6386111111111111]
}, {
name: 'Headland Turning',
data: [0.04694444444444444444, 26.2955555555555556]
}, {
name: 'Transport',
data: [5.1425000000000000, 0.00444444444444444444]
}]
在本部分中,指定特定类型数据的名称,然后指定在xAxis
属性中指定的每列的值。
我很快就处理了一些选项,你可以做的还有很多,但这里是JSFiddle,它有一个堆叠的柱状图和你的数据。
希望这能有所帮助!
相关文章:
- jQuery中是否内置了任何字符串格式化函数
- 我应该使用Ng提交还是点击表格
- CSS表格:从列平移到整个表格宽度
- 将HTML表格导出到excel时,无法将数据加载到excel文件中
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 滚动和表格
- 将谷歌自动完成地址信息放在页面上,而不是表格中
- Google电子表格getValue([cell containing ])不返回制表符
- 打印预览没有应用程序页眉和页脚的html表格
- 将字符串转换为格式化日期
- Highcharts-如何在自定义格式化程序中获得默认的y轴标签格式化程序
- 区分电子表格中的空单元格和0值
- 用Javascript重新格式化复杂文本日期字符串的更好方法
- 使用外部数据创建仪表板(谷歌电子表格)-JavaScript
- 谷歌电子表格导出为json文件,如何格式化
- 用angular和javascript对表格进行条件格式化
- jquery+格式化表格中单元格的颜色
- Apps-script:将电子表格单元格复制到表格中,并进行格式化
- 如何在angularjs中进行表格格式化
- 在Javascript或Jquery中导出html表格和格式化的CSS到Excel或PDF文件