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

Question

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

我是 SVG 新手，不知道如何检测用户已滚动到末尾并基于此触发 ajax 查询。谁能帮我解决这个问题。

谢谢， 西瓦库玛尔。

Answer 1

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

我不知道您是否有任何理由仅在用户移动滚动条时加载新数据，我建议如果用户可视化最左侧的数据，则触发 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!");
                        }
                    }
                }
            }
        }, [...]

Answer 2

我通过以下方式解决了这个问题。

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