jquery用flot创建堆积条形图?

标签 jquery charts 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);
});

关于jquery用flot创建堆积条形图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2589417/

相关文章:

java - 如何将数据从java程序传递到javafx应用程序图表?

javascript - 切换流量图

javascript - 图表多轴配置不正确

flot - jquery float 条形图条形宽度

Javascript 将鼠标悬停在 PNG 图像的可见部分上

javascript - 在 .mousemove 函数中循环

jquery - 使用 html 或 js 在 html 输入中强制小数?面具

r - 从 R 中的点绘制热图

javascript - 通过 D3 错误在 SVG 中制作多个矩形

javascript - jQuery mouseenter 未找到并将 addClass 应用于正确的数据属性 div