baidu_35920590
快乐的小猪哥哥
采纳率100%
2021-02-27 16:51

hightcharts做个实时曲线图

50

api地址:https://history.btc126.com/trend/api.php

做个类似于:https://www.qkl123.com/data/trend/btc

不用highcharts也行,能实现就好。

请贴下完整的代码,谢谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

1条回答

  • showbo GoCityPass新加坡曼谷通票 2月前

     highcharts大概写了个,你的api.php数据要动态加载的话自己用ajax获取下。在线查看效果:http://www.w3dev.cn/demo/highcharts-btc/

    <html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
        <script src="https://code.highcharts.com.cn/highcharts/modules/annotations.js"></script>
        <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
    
        <script src="http://www.w3dev.cn/theme/js/jquery1.4.2.js"></script>
    </head>
    <body>
        <div style="height:500px" id="container"></div>
        <script>
            $.getJSON('data.js',//注意修改你的数据接口地址,而且注意不要跨域,要不会出错,除非数据接口地址允许跨域请求
                function (data) {
                    initChart(data)
            });
    
            function initChart(data) {
                console.log(data)
    
                Highcharts.setOptions({ global: { useUTC: false } });
                function activeLastPointToolip(chart) {
                    var points = chart.series[0].points;
                    chart.tooltip.refresh(points[points.length - 1]);
                }
                var startCount = 100;
                var annotations = [{
                    labels: data.filter(function (v) { return v.event }).map(function (v) {
                        return {
                            point: {
                                xAxis: 0,
                                yAxis: 0,
                                x: new Date(v.datetime).getTime(),
                                y: parseFloat(v.close)
                            },
                            text: v.event
                        }
                    })
                }];
                var startData = data.splice(0, startCount);
                startData = startData.map(function (v) { return [new Date(v.datetime).getTime(), parseFloat(v.close)] });
    
                var chart = Highcharts.chart('container', {
                    chart: {
                        animation: true,
                        type: 'line',
                        events: {
                            load: function () {
                                var series = this.series[0], chart = this;
                                activeLastPointToolip(chart);
                                setTimeout(function () {
                                    var timer = setInterval(function () {
                                        if (data.length == 0) { clearInterval(timer); return; }
                                        var v = data.splice(0, 1)[0];
                                        var x = (new Date(v.datetime)).getTime(), y = parseFloat(v.close);
                                        series.addPoint([x, y], true, true);
                                        activeLastPointToolip(chart);
                                    }, 1000);
                                }, 3000);
                            }
                        }
                    },
                    title: { text: '比特币趋势图' },
                    annotations: annotations,
                    xAxis: { type: 'datetime' },
                    yAxis: { title: { text: null } },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2) + (this.event ? '<br/>' + this.event : '');
                        }
                    },
                    legend: { enabled: false },
                    series: [{ name: '比特币趋势图', data: startData }]
                });
            }
        </script>
    </body>
    </html>
    点赞 评论 复制链接分享