我正在尝试使用columnchart
创建highcharts
。目的是将2个系列堆叠在彼此之上,并将第3个系列放置在它们之外。
我的示例CSV文件如下所示:
Datoer,01/2013,02/2013,03/2013,04/2013
Disk - Freespace,800,1000,1243,1387
Disk - Allokeret,1000,1200,1456,1689
Tape Forbrug,5241,5942,6752,7210
代码如下所示:
$(document)
.ready(function () {
var graph = {
chart: {
renderTo: 'container',
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Imaginært Diskforbrug'
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Gigabyte'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -100,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: []
};
$.get('data.txt', function (data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function (lineNo, line) {
var items = line.split(',');
// header line containes categories
if(lineNo == 0) {
$.each(items, function (itemNo, item) {
if(itemNo > 0) graph.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
data: []
};
$.each(items, function (itemNo, item) {
if(itemNo == 0) {
series.name = item;
} else {
series.data.push(parseFloat(item));
}
});
graph.series.push(series);
}
});
var chart = new Highcharts.Chart(graph);
});
});
我的问题是,我似乎无法弄清楚如何区分堆叠的系列,哪些不是。我希望CSV文件中的第四行不与另外两行(文件中的数字2和3)堆叠,而是显示在它们旁边。
似乎我唯一的选择是定义列是否堆叠在plotOptions
,但这使我无法分离系列的堆叠。
答案 0 :(得分:0)
这是什么,你在找什么?
http://api.highcharts.com/highcharts#series.stack
jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/stack/
答案 1 :(得分:0)
我建议您熟悉预处理CSV数据 http://docs.highcharts.com/#preprocessing