javascript - 流程图 : bar + line, 不同颜色和自定义数据参数

Question

目标

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

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

还有很多pages回答如何添加条形和线条。

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

一个额外的好处是能够向每个条形/线条添加自定义参数(请参阅下面的“testId”示例) - 但这不一定是必需的，作为解决方法，我可以在页面加载时创建一个引用的对象每个柱的位置(例如“刻度”数组)。

我当前的解决方法

我已经可以使用多个数据集来实现这一点，如 jFiddle 中所示。 ，我根据 this 构建的答案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，如“testId “- 请参阅“基本原理”)。

理由

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

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 数据对象会更简单(从 ajax 将其作为 JSON 返回)，而且它还有添加您自己的额外好处每个条/线的参数(例如上面显示的“testId”。id 本身将用于通过点击或悬停条时的 ajax 检索更多数据。

例如:

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

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

最终想法

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

谢谢。
- 史蒂夫。

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 自己处理它会更简单。