javascript - Highcharts - 棒图时间序列的一种破解

Question

来自 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>

那么我在时间序列图上做错了什么？时间序列是否可以像第一个工作脚本一样完成？我想为顶部的每根棍子添加箭头

有人请帮帮我...

如果您需要更多说明，请对我大喊......

谢谢..

Answer 1

您的日期太接近，无法为您的路线提供任何坡度。 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]
]