jquery用flot创建堆积条形图？答案

【问题标题】：jquery creating stacked bar chart with flot?jquery用flot创建堆积条形图？
【发布时间】：2010-04-07 01:14:57
【问题描述】：

我正在使用 jquery flot 并且我正在尝试创建一个堆叠条形图，但我遇到了一些语法问题......我会在最后发布我的代码，但我很确定这是错的。我确实得到了一个堆积条形图，但只有三列......

基本上，这是我正在使用的数据以及我想要完成的数据... 每行上的第一组（焦点组 1）是堆叠条的底部条，第二组（焦点组2）是第二组，第三组（Focus Group 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);
});

【问题讨论】：

标签： jquery charts flot

【解决方案1】：

您没有正确输入数据。应该是这样的：

$(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);
});

【讨论】：

【解决方案2】：

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);
});

这个例子不适合你吗？

【讨论】：

这正是我使用的，但我只得到三列，没有标签......
如何贴标签请看我的回答。

【解决方案3】：

您只需将标签附加到数据上……大概是这样：

graph = $.plot($('div#some_graph'),
[
   {label: 'Work', data: rsp.work},
   {label: 'Travel', data: rsp.travel}
],
{
series: {
 ...

【讨论】：