hightcharts做个实时曲线图

问题描述：

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

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

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

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

答

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>

hightcharts做个实时曲线图

相关推荐