来自 highchart 开发者的大家好 Pawel-fus上Highcharts official forum ,我发现highchart不支持棒图,使用链接系列可以实现类似的效果。
我有 u 和 v 组件,我想使用 highcharts 将它们显示为棒,所以理论上我所知道的是
棒图是 u-v 平面上的图。假设你有时间 向量序列 (u(t), v(t))。然后,绘制线段 从 (ct, 0) 到 (ct+u(t), v(t)) 在 u-v 平面上对于 t 的所有值,其中 c 是任意值 持续的。每条线段代表向量 (u(t), v(t)) 但其原点被移动为 (ct, 0)。 因此,垂直轴为 v,水平轴为 u。 但是,横轴被“标记”为时间 t,只是为了 方便起见,表示原点的偏移(ct,0)。
在 Pawel-Fus 的帮助下,我可以实现这样的理论,这里 x 轴是 0 - 3 的数字,结帐 Fiddle - working theory
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
series: [{
name: 'main',
id: 'main',
data: [
[0, 0],
[(-3.969 +0), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[1, 0],
[(-4.578 + 1), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[2, 0],
[(1.593 + 2), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[3, 0],
[(-1.622 + 3), 1.580]
]
}]
});
});
</script>
但我的最终目标是制作时间序列图,所以我尝试了这样的方法,这里我用日期替换,不幸的是我没有得到像上面那样的结果结帐 Bad Fiddle
<script src="jquery-1.11.0.min.js"></script>
<script src="highcharts.js"></script>
<div id="container" style="height: 400px; width: 500px"></div>
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
colors: ['blue'],
plotOptions: {
series: {
marker: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats : {
year: '%e %b %Y',
}
},
series: [{
name: 'main',
id: 'main',
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 2, 16), 0],
[(-4.578 + Date.UTC(1982, 2, 16)), 0.596]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 3, 16), 0],
[(1.593 + Date.UTC(1982, 3, 16)), 0.484]
]
}, {
name: 'main',
linkedTo: 'main',
data: [
[Date.UTC(1982, 4, 16), 0],
[(-1.622 + Date.UTC(1982, 4, 16)), 1.580]
]
}]
});
});
</script>
那么我在时间序列图上做错了什么?时间序列是否可以像第一个工作脚本一样完成?我想为顶部的每根棍子添加箭头
有人请帮帮我...
如果您需要更多说明,请对我大喊......
谢谢..
最佳答案
您的日期太接近,无法为您的路线提供任何坡度。 Date.UTC 返回自 1970 年 1 月 1 日以来的毫秒数,因此仅减去 3 或 4 毫秒,只会产生垂直线。这:
data: [
[Date.UTC(1982, 1, 16), 0],
[(-3.969 + Date.UTC(1982, 1, 16)), -1.001]
]
等于:
data: [
[382665600000, 0],
[382665599996.031, -1.001]
]
关于javascript - Highcharts - 棒图时间序列的一种破解,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23459043/