Flot Charts：条形图+线，不同的颜色和自定义数据参数

Question

目标

我需要的是一张图表，其中包含不同颜色的条，顶部有不同颜色的线条。

许多questions回答了如何实现不同颜色的条。

许多 pages 回答了如何添加条和线。

但我想结合这两个解决方案。

一个额外的好处是能够将自定义参数添加到每个条/线（参见下面的 "testId" 示例）- 但这不是必需的，作为一种解决方法，我可以在引用每个栏位置的页面加载（例如 "ticks" 数组）。

我目前的解决方法

我已经可以实现使用多个数据集，如jFiddle, which i have constructed based off answer's jFiddle所示，但这需要多个不同的数据像这样设置每个条形/线条的每种颜色变体：

var dataBarsRed = {
  data: [
    [0, 1],
    [2, 1.9], 
  ],
  color: 'red'
};

var dataBarsOrange = {
  data: [
    [1, 2],
    [3, 3.9], 
  ],
  color: 'orange'
};

var dataBarsGreen = {
  data: [
    [4, 4],
    [5, 4.5]
  ],
  color: 'green'
};

var dataLineRed = {
  data: [
    [0, 2, 2],
    [1, 2, 2],
    [2, 2, 2],
    [3, 2, 2],
    [4, 2, 2],
    [5, 2, 2],
  ],
  label: '60% efficiency',
  color: 'red',
  bars: {
    barWidth: 1
  }
};

var dataLineOrange = {
  data: [
    [0, 4, 4],
    [1, 4, 4],
    [2, 4, 4],
    [3, 4, 4],
    [4, 4, 4],
    [5, 4, 4],
  ],
  label: '85% efficency',
  color: 'orange',
  bars: {
    barWidth: 1
  }
};

然后像这样添加它们：

$.plot("#placeholder", [dataBarsRed, dataBarsOrange, dataBarsGreen, dataLineRed, dataLineOrange],...

据我所知，无法向此数据结构添加任何自定义数据参数，其中每个项目都有自己的一组自定义变量（例如对象 ID 到 link 到后面-结束，如 "testId" - 参见 "The Rationale").

理由

有没有办法使用与第一个相同的条形数据结构来实现我需要的功能 link:

var data = [
  { data: [[0,1]], color: "red", testId: 30 },
  { data: [[1,2]], color: "yellow", testId: 31 },
  { data: [[2,3]], color: "green", testId: 32 }
];

我想这样做的原因是在 Java 端构建 Flot 数据对象会简单得多（return 它作为 JSON来自 ajax)，但它还有一个额外的好处，即向每个条/线添加您自己的参数（例如上面显示的 "testId"。ID 本身将用于通过 ajax 检索更多数据单击或悬停该栏。

例如：

$(container).bind('plothover', function(event, position, item){

  console.log(item.series.testId)
});

最后的想法

我觉得我在绕圈子。我喜欢 Flot 图表插件及其灵活性，但有多种方法可以实现相同的视觉效果。

谢谢。
-史蒂夫

Answer 1

您可以简单地将您的五个数据对象组合成一个对象数组，您还可以向这些对象添加您自己的属性，如下所示：

var data = [ {
  data: [
    [0, 1],
    [2, 1.9], 
  ],
  color: 'red',
  testId: 31
}, {
  data: [
    [1, 2],
    [3, 3.9], 
  ],
  color: 'orange',
  testId: 32
}, {
    //...
}];

例如在悬停事件中使用您自己的属性就像

一样简单

$('#details').html("<span class='detail'>...(testId = " + item.series.testId + ")</span>");

完整示例请参阅 updated fiddle。

PS：对于图表中的线条，标记可能更合适（参见 documentation and this fiddle，其中一条线条被标记替换）。

Answer 2

解决方案

完整代码见this jFiddle。

在考虑了 Raidri 所说的关于它的简单性之后，我又尝试了一下，我得到了一些我需要的东西，并且更加一致。我觉得以前没有看到这个有点傻（也许我看到了，语法错误导致我继续前进）。无论如何，如果有人感兴趣，请看这里的代码：

注意：这确实感觉像是一个障碍或黑客 - 我不确定这种数据结构是否曾经有意为之，但它为我的目的完成了工作。

var data = [
  { data: [[0,1]], color: "red", testId: 30, isBar: true },
  { data: [[1,2]], color: "orange", testId: 31, isBar: true },
  { data: [[2,1.9]], color: "red", testId: 32, isBar: true },
  { data: [[3,3.9]], color: "orange", testId: 33, isBar: true },
  { data: [[4,4]], color: "green", testId: 34, isBar: true },
  { data: [[5,4.5]], color: "green", testId: 35, isBar: true },
  { data: [[0, 4, 4],[0.5, 4, 4],[1, 4, 4],[1.5, 4, 4],[2, 4, 4],[2.5, 4, 4],[3, 4, 4],[3.5, 4, 4],[4, 4, 4],[4.5, 4, 4],[5, 4, 4]], shadowSize: 0, color: 'orange', isLine: true, label: '85% efficiency' },
  { data: [[0, 2, 2],[0.5, 2, 2],[1, 2, 2],[1.5, 2, 2],[2, 2, 2],[2.5, 2, 2],[3, 2, 2],[3.5, 2, 2],[4, 2, 2],[4.5, 2, 2],[5, 2, 2]], shadowSize: 0, color: 'red', isLine: true, label: '60% efficiency' },
  { data: [[0, -1, -1]], shadowSize: 0, color: 'green', label: '100% efficiency', isLine: true }
];

var plot = $.plot("#placeholder", data, {       
  bars: {
      show: true,
      align: 'center',
      barWidth: 0.5
  },
  lines: { 
    show: true, 
    lineWidth: 0.1, 
    fill: false 
  },
  grid: {
      hoverable: true,
      autoHighlight: true
  },
  xaxis: {
    ticks: [[0,'Steve'],[1,'Bob'],[2,'Chris'],[3,'Joe'],[4,'Dave'], [5, 'Jon']]
  },
  yaxis: {
      min: 0,
      max: 5
  },
  legend:{
    container: '#legend'
  }
});

有一些细微差别，例如行点（每行数据元素）的数量需要考虑条形宽度。例如。如果我的条形宽度是 1，我只需要 5 个元素，但是因为我的宽度是 0.5，所以每个数据数组需要 10 个行元素（以填补空白）。此外，"shadowSize: 0" 是必需的，否则您会在该行的中间看到一个灰色阴影。

我还向每个元素添加了 "isBar" 和 "isLine"，因此我的悬停事件可以区分它们，因此它不会在悬停该行时更新信息框。这是因为我这样做的方式有点 "hack"，因为该行不是一个行，而是每个行列。如果没有这种进一步的类型区分，将鼠标悬停在线条上会根据鼠标的 x 位置显示栏的名称。

我还必须为图例添加一条 "fake" 绿线 - 位置 0，引用轴范围外的开始和结束位置（-1，在本例中，6 也可以).我意识到我可能可以创建一个自定义图例...但是让 flot 自己处理它更简单。

Flot Charts：条形图+线，不同的颜色和自定义数据参数

Flot Charts: bar + line, different colours and custom data parameters

javascript

jquery

flot

目标

我目前的解决方法

理由

最后的想法

解决方案