float 动态定义带有标签的多个数据

Question

我已经阅读了至少六个关于这样做的其他问题，但我无法弄清楚我的不同之处：http://jsfiddle.net/JakobJingleheimer/Z5UFg/1/

我添加了一个从控制台运行的函数LoadGraph.check_data。运行load_data(1,"199 Water St",7);后输出的数据为：

#mine
[ { label:"coffee",  data:[ [1659] ] },
  { label:"cocoa",  data:[ [717] ] },
  { label:"tea",  data:[ [206] ] }
]

在我看来，这与 the example in the doc 完全相同（就在 Plot Options 上方）：

#doc example
[ { label: "Foo", data: [ [10, 1], [17, -14], [30, 5] ] },
  { label: "Bar", data: [ [11, 13], [19, 11], [30, -7] ] }
]

我还尝试在 SO answer 5661134 之后对我的结构进行建模，但这也没有成功（与小提琴中看到的结果完全相同）。

小提琴中的第二张图应该有 3 个相邻的条形图，或者（更好的是）将 3 个条形图堆叠在一起。

更新：我添加了一个 x 值以获得以下信息（但它仍然不起作用，小提琴）：

#http://jsfiddle.net/JakobJingleheimer/Z5UFg/3/
[ { label:"coffee",  data:[ [7, 1659] ] },
  { label:"cocoa",  data:[ [7, 717] ] },
  { label:"tea",  data:[ [7, 206] ] }
]
#http://jsfiddle.net/JakobJingleheimer/Z5UFg/2/
[ { label:"coffee",  data:[ [0, 1659] ] },
  { label:"cocoa",  data:[ [1, 717] ] },
  { label:"tea",  data:[ [2, 206] ] }
]

如果我去掉对象性（例如，标签），它会起作用（但我需要弄清楚为什么 f_opts.series.stack=true 不起作用 - 我认为，因为所有 3 个条都是蓝色的，所以它正在治疗三者同系列）：v4

更新 2 这些应该在 2 个不同的地方吗？我的意思是标签+数据数组对象是否应该在选项对象中，并且数据也应该在数据数组中？文档有点难以弄清楚，因为它从未说明父对象是什么。

Answer 1

我相信this version of the fiddle 可能是您想要做的。

问题在于您将 f_data 视为单个对象 {} 而不是对象数组，特别是系列对象。 （您可以通过使用[f_data] 将其强制放入绘图调用中的数组来解决此问题，但这将您限制为单个系列。）。你想要做的而不是设置f_data = tmp，而是将一个完整的系列对象推入f_data，并将tmp作为其data数组：

f_data.push({label:cat, stack:true, data:tmp});

每个系列对象（f_data 数组中的每个元素）都有自己的数据和标签，如您在我的示例中所见。

您没有看到任何堆叠工作的原因有两个：

1. 您需要包含jquery.flot.stack.js 文件才能获得堆叠功能。 （我在小提琴中添加了链接资源。）
2. 堆叠只对多个系列有意义。您的“深度”视图将 3 个重叠的数据点添加到单个系列中，而不是创建 3 个单独的系列，每个系列都有 1 个数据点。

我相信我的示例实现了您的目标。让我知道我是否弄错了。 我用 //NEW 标记了我添加的新行以突出显示更改。

Answer 2

不同之处在于您的数据点仅包含一个值，而 Flot 需要 [x, y] 对。查看文档的Data Format 部分了解更多信息。

编辑：看起来您对 $.plot 的调用也使用了[f_data]，即使 f_data 已经是一个系列数组。看起来这就是您当前的问题的原因。

如果您遇到更多问题，您真的应该尝试将您的代码缩减为一个更简单的示例，然后从那里开始工作。这已经从一个问题变成了一个调试会话。