2013-07-31 3 views
2

Я пытаюсь отобразить карту флота с 3 массивами. Для того, чтобы сделать вещи простыми массивы все равно:Неожиданное рендеринг карт флота

[[1,1],[2,3],[3,6],[4,10],[5,15],[6,21]] 

создать массивы со следующим рубинового кодом:

def flot_chart_series 
    total=0 
    foo=[] 
    (1..6).each do |number| 
    foo.push [number, total+=number] 
    end 
    foo 
end 

Вот мой Эрба обрабатывается Javascript код:

var fb_shares = <%= flot_chart_series %>; 
var twitter_shares = <%= flot_chart_series %>; 
var email_shares = <%= flot_chart_series %>; 

var plot = $.plot($("#statsChart"), 
    [ { data: fb_shares, label: "Facebook shares"}, 
    { data: twitter_shares, label: "Twitter shares" }, 
    { data: email_shares, label: "Email shares" }], { 
    series: { 
     lines: { show: true, 
     lineWidth: 1, 
     fill: true, 
     fillColor: { colors: [ { opacity: 0.1 }, { opacity: 0.13 }, { opacity: 0.15 } ] } 
     }, 
     points: { show: true, 
     lineWidth: 2, 
     radius: 3 
     }, 
     shadowSize: 0, 
     stack: true 
    }, 
    grid: { hoverable: true, 
     clickable: true, 
     tickColor: "#f9f9f9", 
     borderWidth: 0 
    }, 
    legend: { 
// show: false 
labelBoxBorderColor: "#fff" 
}, 
colors: ["#3071eb", "#30a0eb", "#a7b5c5"], 
xaxis: { 
    ticks: [[1, "JAN"], [2, "FEB"], [3, "MAR"], [4,"APR"], [5,"MAY"], [6,"JUN"], 
    [7,"JUL"], [8,"AUG"], [9,"SEP"], [10,"OCT"], [11,"NOV"], [12,"DEC"]], 
    font: { 
    size: 12, 
    family: "Open Sans, Arial", 
    variant: "small-caps", 
    color: "#697695" 
    } 
}, 
yaxis: { 
    ticks:3, 
    tickDecimals: 0, 
    font: {size:12, color: "#9da3a9"} 
} 
}); 

Проблема в том, что диаграмма не отображает 3 одинаковых строк, она создает линии, которые увеличиваются в стоимости. Вот скриншот графика: flot chart screen shot

Любые идеи, что я делаю неправильно?

+1

'stack: true' это правильно? Я не нахожу его в flot API. Пожалуйста, проверьте и убедитесь, что вы делаете правильно. Пожалуйста, дайте рабочий скрипт –

ответ

2

Как подсказка @ в его комментариях, это связано с тем, что вы используете плагин для укладки с stack: true. Это собирается уложить 3 одинаковые строки друг на друга.

Сравните эти скрипки: stack true и stack false.

Если вы не хотите складывать, просто избавитесь от плагина (меньше javascript == более быстрая загрузка) и опции stack: true.

+0

Спасибо. Отсортировано 'проблема' – grabury

Смежные вопросы