当用户滚动到左端时，向highcharts(Highstock)添加数据

Adding data to highcharts(Highstock) when user scrolling reaches left end

本文关键字：highcharts Highstock 数据 添加 滚动 用户      更新时间：2023-09-26

我在我的网站使用hilitock。股票图表导航器中的滚动条是使用SVG绘制的。我想添加更多的数据(通过ajax)到图形时，用户滚动到最左端。

我是SVG的新手，不知道如何检测用户已经滚动到最后并基于此触发ajax查询。有谁能帮我一下吗?

谢谢,Sivakumar .

所以，今天我有同样的问题，我刚刚发现你的问题。

我不知道您是否有任何理由只在用户移动滚动条时加载新数据，我建议如果用户可视化最左边的数据，则触发ajax查询(即:滚动滚动条，按下左箭头，拖动导航图的区域，等等)。

如果这个解决方案适用于你，你可以尝试这样做:

chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'chart',
            events: {
                redraw: function(event) {
                    if (chart.xAxis) {
                        var extremes = chart.xAxis[0].getExtremes();
                        if (extremes && extremes.min == extremes.dataMin) {
                            console.log("time to load more data!");
                        }
                    }
                }
            }
        }, [...]

我用下面的方法解决了这个问题。

<script>
import axios from 'axios';
export default {
    name: 'Chart',
    data() {
        return {
            chartOptions: {
                chart: {
                    events: {
                        // we will lose the context of the component if we define a function here
                    }
                },
                series: [{
                    type: 'candlestick',
                    data: null,
                }],
            },
        };
    },
    methods: {
        onRedraw: function () {
            let chart = this.$refs.chart.chart
            if (chart.xAxis) {
                let extremes = chart.xAxis[0].getExtremes()
                console.log(extremes)
                if (extremes && extremes.min <= extremes.dataMin) {
                    console.log("time to load more data!");
                }
            }
        }
    },
    created() {
        axios.get('https://demo-live-data.highcharts.com/aapl-ohlcv.json').then((response) => {
            this.chartOptions.series[0].data = response.data
            this.chartOptions.series[0].name = 'AAPL'
        });
        
        this.chartOptions.chart.events.redraw = this.onRedraw
    },
};
</script>
<template>
  <highcharts :constructor-type="'stockChart'" :options="chartOptions" ref="chart"></highcharts>
</template>
相关文章：