javascript - Flot:将堆叠条形图和折线图组合在一张图表中

Question

我正在尝试将堆积条形图和折线图合并到一个绘图中。

我面临的问题是，行数据也会堆积。这意味着第一个点 (line.data[0]) 的数据将绘制为 15，但我希望它是 5 。

请看这个jsfiddle:http://jsfiddle.net/derkinzi/eor5ngjd/

它在设置stack: null时有效，但我需要堆栈。另外，给该行它自己的 yaxis 并不能解决问题。 (将第 90 行更改为:yaxis: 2)

如何修改代码，以便 line.data 获得具有独立 y 轴的独立绘图？

基本上我需要这个，但是有堆叠的条:http://jsfiddle.net/derkinzi/eor5ngjd/11/

这是我的数据集:

var stack1 = {
    label: 'stack1',
    data: [
      [1, 6],
      [2, 3],
      [4, 5],
      [4, 3],
      [5, 4]
    ],
    bars: bar_options
  };
  var stack2 = {
    label: 'stack2',
    data: [
      [1, 4],
      [2, 4],
      [3, 4],
      [4, 4],
      [5, 4]
    ],
    bars: bar_options
  };
  var line = {
    label: 'line',
    data: [
      [1, 5],
      [2, 15],
      [3, 15],
      [4, 15],
      [5, 20]
    ],
    lines: line_options,
    yaxis: 1,
    points: {
      radius: 5,
      show: true
    },
  };
  var dataset = [stack1, stack2, line];

Answer 1

如 stack plugin 中所述，您可以为每个数据系列指定 stack 选项，因此在您的情况下请执行以下操作:

var stack1 = {
    //...
    stack: true,
};
var stack2 = {
    //...
    stack: true,
};
var line = {
    //...
    stack: false,
    //...
};

此外，定义多个轴时，请使用 yaxes 属性，而不是 yaxis。

Updated fiddle