highcharts 如何在两个点之间绘制一条线后触发回调？

eni9jsuy 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(174)

我的样条曲线图中有以下几点：

我试图在两点之间画一条线后调用回调函数。
This是我一直在做的。

<!DOCTYPE html>

<html>

    <head>
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    </head>

    <body>
        <figure class="highcharts-figure">
            <div id="container"></div>

            <div class="imFlex">

            </div>
        </figure>

        <style>
            .imFlex { display: flex; flex-direction: row; }

                .imFlex > h1 { border: 1px ridge black; padding: 1rem; background-color: lightgrey; font-weight: bold; margin-right: 10rem; }
        </style>

        <script>
            var chart;
            var isTesting = true;
            var timestamp;

            var options = {
                chart: {
                    events: {
                        load: function () {

                        }
                    }
                },
                title: {
                    text: ' EVERY BET TAKEN FOR THE PAST 5 MINUTES '
                },
                xAxis: {
                    title: {
                        text: ' TIMEFRAME FOR THE BETS '
                    },
                    type: 'datetime'
                },
                yAxis: {
                    title: {

                        text: ' NUMBER OF USER BETS '
                    },
                },
                tooltip: {
                    crosshairs: true,
                    shared: true
                },
                plotOptions: {
                    spline: {
                        marker: {
                            radius: 4,
                            lineColor: '#666666',
                            lineWidth: 2
                        }
                    },
                    series: {
                        animation: {
                            duration: 300000,
                        }
                    }
                },
                series: [{
                    name: "Random",
                    data: [5, 8, 9, 50, 34]
                }]
            };

            function UpdateUI(){
                var increment = 1;

                var intervalInstance = setInterval(function(){
                    console.log(increment + " minutes passed");
                    increment++;

                    if(increment >= 5)
                    {
                        clearInterval(intervalInstance);
                    }
                }, 60000);
            }

            //Initialize chart
            $(document).ready(function () {
                UpdateUI();
                chart = Highcharts.chart("container", options);
            });

        </script>
    </body>

</html>

上面代码的问题是，这条线的渲染时间并不正好是1分钟。我需要一个回调函数，它将在一条线连接两个点后触发。我如何才能实现这一点？

highcharts

来源：https://stackoverflow.com/questions/72947839/how-to-fire-a-callback-after-a-line-has-been-drawn-between-2-points

2条答案

按热度按时间

vof42yt11#

而不是设置动画持续时间，你可以在每个间隔中添加点，最终的结果略有不同，但这是一个更精确的解决方案。

chart: {
  events: {
  load: function() {
    let chart = this,
      i = 1;

    function addPointToSeries() {
      console.log(i + "second passed");
      chart.series[0].addPoint(data[i]);
      i++;
      if (i === data.length) {
        clearInterval(addPoints)
      }
    }

    let addPoints = setInterval(addPointToSeries, 1000);
  }
  }
},

简化的演示：https://jsfiddle.net/BlackLabel/3csma8wg/
API参考：https://api.highcharts.com/highcharts/chart.events.load https://api.highcharts.com/class-reference/Highcharts.Series#addPoint

赞(0）回复(0）举报 2022-11-10

vulvrdjw2#

Highcharts中使用的默认缓动函数是easeInOutSine。这会导致点的动画分布不均匀。您可以通过为线性函数设置animation.easing选项来轻松解决此问题。您使用四个时间段，因此需要将animation.duration设置为240000ms。

series: {
  animation: {
    duration: 240000,
    easing: function(x) {
      return x
    }
  }
}

演示：https://jsfiddle.net/BlackLabel/0fn5hjrm/

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 如何在两个点之间绘制一条线后触发回调？

2条答案

相关问题

热门标签

最新问答