[英]jquery creating stacked bar chart with flot?
我正在使用jquery flot,我正在嘗試創建一個堆積條形圖,但我有一些語法問題......我會在結尾處發布我的代碼,但我確信這是錯誤的。 我確實得到一個堆積條形圖,但只有三列......
基本上,這里是我正在使用的數據以及我想要完成的事情......每一行的第一組(焦點組1)是堆積條的底欄,第二組(焦點組2)是第二組,第三組(焦點組3)是最高組。 “響應”是我想要在x軸上使用的,每組中的第一個數字是x,第二個數字是y。
Response1, [0, 0], [0,0], [0,9]
Response2, [1, 5], [1,5], [1,11]
Response3, [2, 2], [2,0], [2,8]
Response4, [3, 1], [3,2], [3,6]
Response5, [4, 0], [4,0], [4,7]
我還要提一下,我不確定堆疊圖表是否是最好的方式......不可否認,我不是一個非常直觀的人,並且通常會發現圖表令人討厭...如果有更好的方式呈現這些數據,那么我對建議完全開放......
實質上...
我有一系列問題。 這些問題中的每一個都提交給三個焦點小組。 焦點小組成員選擇了回復。 我試圖針對每個問題呈現每個焦點小組的每個響應的計數。 我認為堆疊圖表是最好的方式,但同樣,我對其他方式持開放態度。 唯一的問題是,我絕對需要數據的直觀表示....
使用中的代碼:
$(function () {
var cssid = "#placeholder";
var data = [ [ [1, 0], [2,0], [3, 2] ], [ [1, 0], [2,0], [3, 6] ], [ [1, 0], [2,0], [3, 8] ], [ [1, 0], [2,0], [3, 5] ], [ [1, 0], [2,0], [3, 5] ], ];
var options = { series: { stack: 0, lines: { show: false, steps: false }, bars: { show: true, barWidth: 0.5 },},};
$.plot($(cssid), data, options);
});
您沒有正確輸入數據。 它應該如下:
$(function () {
var css_id = "#placeholder";
var data = [[[0,0], [1,5], [2,2], [3,1], [4,0]],
[[0,0], [1,5], [2,0], [3,2], [4,0]],
[[0,9], [1,11], [2,8], [3,6], [4,7]],];
var options = {series: {stack: 0,
bars: { show: true, barWidth: 0.5 },},
xaxis: {ticks: [[0, 'Resp1'], [1, 'Resp2'], [2, 'Resp3'], [3, 'Resp4'], [4, 'Resp5']]},
};
$.plot($(css_id), data, options);
});
你只需要在數據上添加標簽......就像這樣:
graph = $.plot($('div#some_graph'),
[
{label: 'Work', data: rsp.work},
{label: 'Travel', data: rsp.travel}
],
{
series: {
...
http://www.saltycrane.com/blog/2010/03/jquery-flot-stacked-bar-chart-example/包含堆積條形圖的示例代碼:
$(function () {
var css_id = "#placeholder";
var data = [[[1,10], [2,20], [3,30], [4,40],],
[[1,30], [2,30], [3,30], [4,30],],
[[1,40], [2,30], [3,20], [4,10],],];
var options = {series: {stack: 0,
lines: { show: false, steps: false },
bars: { show: true, barWidth: 0.9 },},};
$.plot($(css_id), data, options);
});
這個例子不適合你嗎?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.