Question

目标

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

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

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

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

额外的好处是能够为每个条/行添加自定义参数（请参阅下面的“testId”示例） - 但是这不是必需的，因为我可以在页面加载时创建一个引用的对象每个柱的位置（例如“滴答”阵列）。

我目前的解决方法

我已经可以使用多个数据集 实现此，如jFiddle所示，我根据this answer {{{{{但是，这需要每个条形码/每行的每个颜色变体有多个不同的数据集，如下所示：

Answer 1

解决方案

有关完整代码，请参阅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”，因此我的悬停事件可以区分它们，因此当线路悬停时它不会更新信息框。这是因为我这样做的方式有点“黑客”，因为该行不是一个行，而是每列行。如果没有这种类型的进一步区分，将鼠标悬停在线上会根据鼠标的x位置显示条形名称。

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

Answer 2

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

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

在hover-event中使用自己的属性就像

一样简单

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

有关完整示例，请参阅updated fiddle。

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

Flot Charts：bar + line，不同颜色和自定义数据参数

目标

我目前的解决方法

理由

最后的想法

2 个答案:

解决方案