javascript - PHP JavaScript中的多个折线图

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



提前致谢

最佳答案

如果您仍然需要解决方案，我可以建议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">

关于javascript - PHP JavaScript中的多个折线图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31582637/