php javascript中的多折线图

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

---

提前感谢

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

运行代码段以签出图表。如果你有任何问题，就叫我一声。我是ZingChart团队的一员，很乐意帮忙

var myConfig={
“图形集”：[{
主题：“无”，
箭头：[{
“从”：“节点：绘图=0，索引=0”，
“收件人”：“节点：绘图=0，索引=1”，
“背景色”：“绿色”，
“边框颜色”：“无”，
尺寸：0.5
}, {
“从”：“节点：绘图=0，索引=3”，
“至”：“节点：绘图=0，索引=4”，
“背景色”：“绿色”，
“边框颜色”：“无”，
尺寸：0.5
}, {
“从”：“节点：绘图=0，索引=6”，
“至”：“节点：绘图=0，索引=7”，
“背景色”：“绿色”，
“边框颜色”：“无”，
尺寸：0.5
}, {
“从”：“节点：绘图=1，索引=0”，
“至”：“节点：绘图=1，索引=1”，
“背景色”：“红色”，
“边框颜色”：“无”，
尺寸：0.5
}, {
“从”：“节点：绘图=1，索引=3”，
“至”：“节点：绘图=1，索引=4”，
“背景色”：“红色”，
“边框颜色”：“无”，
尺寸：0.5
}, {
“从”：“节点：绘图=1，索引=6”，
“至”：“节点：绘图=1，索引=7”，
“背景色”：“蓝色”，
“边框颜色”：“无”，
尺寸：0.5
}],
“类型”：“行”，
“scale-x”：{
值：“1:9:1”
},
“scale-y”：{
值：“-10:10:1”，
指南：{
规则：[{
规则：“%v==0”，
“线条颜色”：“红色”
}]
}
},
“情节”：{
“方面”：“分段的”，
可见：0
},
“系列”：[{
“价值观”：[
[2, 8],
[3,6]，空[3,5.7]，
[4.3,4.8]，空[4.5,4.5]，
[5, 3]
]
}, {
“价值观”：[
[3.5, 3.5],
[4.5,2.9]，空[4.5,2.5]，
[5.2，-0.5]，空[5.3，-2.8]，
[5.9, -4.8]
]
}]
}]
};
zingchart.render({
id:'我的图表'，
资料来源：myConfig，
身高：400，
宽度：600
});