JQuery создание гистограммы с накоплением с помощью flot? - PullRequest
Новая
       8

JQuery создание гистограммы с накоплением с помощью flot?

3 голосов
/ 07 апреля 2010

Я использую 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);
});

Ответы [ 3 ]

1 голос
/ 21 апреля 2010

Вы не правильно ввели свои данные. Должно быть так: 

$(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);
});
0 голосов
/ 07 июля 2012

Вы просто должны прикрепить метки к данным ... примерно так: 

graph = $.plot($('div#some_graph'),
[
   {label: 'Work', data: rsp.work},
   {label: 'Travel', data: rsp.travel}
],
{
series: {
 ...
0 голосов
/ 07 апреля 2010

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

Этот пример не работает для вас?

...