javascript - 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">