快乐的小猪哥哥 2021-02-27 16:51 采纳率: 63.6%
浏览 143
已结题

hightcharts做个实时曲线图

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

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

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

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

  • 写回答

1条回答 默认 最新

  • Go 旅城通票 2021-02-27 21:58
    关注

     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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 9月13日

悬赏问题

  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 对于相关问题的求解与代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 信号傅里叶变换在matlab上遇到的小问题请求帮助
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料
  • ¥15 使用R语言marginaleffects包进行边际效应图绘制