FLOT圖表呈現意外

我試圖顯示海軍報圖與3個陣列。爲了使事情變得簡單數組都是一樣的：FLOT圖表呈現意外

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

我創建具有以下Ruby代碼的數組：

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

問題在於圖表沒有繪製相同線條的三條線，它創建了價值增加的線條。這裏是圖的屏幕截圖：flot chart screen shot

任何想法我做錯了嗎？

來源

2013-07-31 grabury

'stack：true'這是正確的嗎？我沒有在flot API中找到它請檢查並確保你做的是正確的。請提供工作小提琴 –

正如在他的評論暗示@captain這是因爲你使用的是堆疊插件與stack: true。這將疊加3條相同的線。

比較這些小提琴：stack true和stack false。

如果你不想堆剛剛擺脫插件（少JavaScript的==加載速度更快）和stack: true選項。

來源

2013-07-31 18:13:07 Mark

謝謝。整理出「問題」 – grabury

FLOT圖表呈現意外

回答

相關問題