php javascript中的多个折线图

Question

如何创建具有不同起点和终点的多线图，如下图所示：

提前致谢

Answer 1

如果您仍然需要解决方案，我可以建议ZingChart。在下面的演示中，我使用XY值对来创建分段折线图，然后隐藏绘图本身并在其上覆盖箭头对象。请注意，箭头中使用的节点索引会跳过系列数组中每个空值的数字。使用简单的规则将引导线设置为红色为零。

运行代码段以查看图表。如果您有任何疑问，请给我一个大声喊叫。我在ZingChart团队，很乐意提供帮助！

var myConfig = {
  "graphset": [{
    theme: "none",
    arrows: [{
      "from": "node:plot=0,index=0",
      "to": "node:plot=0,index=1",
      "background-color": "green",
      "border-color": "none",
      size: 0.5
    }, {
      "from": "node:plot=0,index=3",
      "to": "node:plot=0,index=4",
      "background-color": "green",
      "border-color": "none",
      size: 0.5
    }, {
      "from": "node:plot=0,index=6",
      "to": "node:plot=0,index=7",
      "background-color": "green",
      "border-color": "none",
      size: 0.5
    }, {
      "from": "node:plot=1,index=0",
      "to": "node:plot=1,index=1",
      "background-color": "red",
      "border-color": "none",
      size: 0.5
    }, {
      "from": "node:plot=1,index=3",
      "to": "node:plot=1,index=4",
      "background-color": "red",
      "border-color": "none",
      size: 0.5
    }, {
      "from": "node:plot=1,index=6",
      "to": "node:plot=1,index=7",
      "background-color": "blue",
      "border-color": "none",
      size: 0.5
    }],
    "type": "line",
    "scale-x": {
      values: "1:9:1"
    },
    "scale-y": {
      values: "-10:10:1",
      guide: {
        rules: [{
          rule: "%v==0",
          "line-color": "red"
        }]
      }
    },
    "plot": {
      "aspect": "segmented",
      visible: 0
    },
    "series": [{
      "values": [
        [2, 8],
        [3, 6], null, [3, 5.7],
        [4.3, 4.8], null, [4.5, 4.5],
        [5, 3]
      ]
    }, {
      "values": [
        [3.5, 3.5],
        [4.5, 2.9], null, [4.5, 2.5],
        [5.2, -0.5], null, [5.3, -2.8],
        [5.9, -4.8]
      ]
    }]
  }]
};

zingchart.render({
  id: 'myChart',
  data: myConfig,
  height: 400,
  width: 600
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id="myChart">