2

我正在尝试显示一个包含 3 个数组的浮点图。为了简单起见，数组都是一样的：

[[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

这是我的 Erb 处理的 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

任何想法我做错了什么？

4

1 回答 1

2

正如@captain 在他的评论中暗示的那样，这是因为您正在使用带有stack: true. 这会将 3 条相同的线堆叠在一起。

比较这些小提琴： stack true和stack false。

如果您不想堆叠，只需摆脱插件（更少的 javascript == 更快的加载）和stack: true选项。

于 2013-07-31T18:13:07.730 回答