Javascript 来自php文件的High Charts实时数据系列

Javascript 来自php文件的High Charts实时数据系列,javascript,php,ajax,rest,highcharts,Javascript,Php,Ajax,Rest,Highcharts,我对js和php还比较陌生,我正在尝试从php文件中加载一个包含多个btc价格系列的实时图表。我试过了,但失败了,我只能加载数据系列中的一个,它们都是单独工作的,但我无法同时将它们作为图表上的独立点加载 BITSTAMP.PHP--结果:[15194178090009932.83] <?php header("Content-type: text/json"); function bitstampbtcusdgetprice($url) { $decode = file_get_co

我对js和php还比较陌生,我正在尝试从php文件中加载一个包含多个btc价格系列的实时图表。我试过了,但失败了,我只能加载数据系列中的一个,它们都是单独工作的,但我无法同时将它们作为图表上的独立点加载

BITSTAMP.PHP--结果:[15194178090009932.83]

<?php
header("Content-type: text/json");
function bitstampbtcusdgetprice($url)

{   $decode = file_get_contents($url);
    return json_decode($decode, true); }

$x = time() * 1000;
$y = 
$btcusdgetprice('https://www.bitstamp.net/api/v2/ticker/btcusd');
$btcusdtickerprice = round(($y["last"]), 2);
$ret = array($x, $btcusdtickerprice);
echo json_encode($ret);
?>

CHART.JS

var chart; 

function requestDatabitstamp() {

$.ajax({

    url: 'php/bitstamp.php',
    success: function(point) {

        var series = chart.series[0],
            shift = series.data.length > 100; 

        chart.series[0].addPoint(point, true, shift);      

        setTimeout(requestDatabitstamp, 30000);

    },

    cache: false
});
}

$(document).ready(function() {

chart = new 

    Highcharts.Chart({

    colorAxis:{     gridlineColor: '#4c4c4c'},
    marker:{        animation: '10000'},

                    chart:{ renderTo: 'container',
                            defaultSeriesType: 'line',
                            backgroundColor: '#141414',
                            borderColor: '#00A578',
                            plotbackgroundColor: '#161616',
                            parallelAxes: {linecolor: '#4c4c4c'},
                            events: { load: requestDatabitstamp}},

    tooltip:{       style: {color: '#FFFFFF',
                    fontSize: '10px'},
                    backgroundColor: '#141414',
                    borderRadius: '12'},

    title:{         text: '<font style="color:#FFFFFF;font-family:verdana;">Exchange Comparison</font>'},

    plotOptions:{   series: {
                    color: '#00A578'}},

    xAxis:{         type: 'datetime',
                    tickPixelInterval: 150,
                    maxZoom: 50 * 1000},

    yAxis:{         minPadding: 0.2,
                    maxPadding: 0.2,

    title:{         text: '<font style="color:#00A578;font-family:verdana;">USD</font>',
                    margin: 30}},

    series: [{      color: '#00A578',
                    name: '<font align="center" style="color:#00A578;font-family:verdana;">Bitstamp</font>',
                    data: []

    }]});});
var图;
函数requestDatabitstamp(){
$.ajax({
url:'php/bitstamp.php',
成功:功能(点){
var系列=图表系列[0],
shift=series.data.length>100;
chart.series[0]。添加点(点、真、移位);
设置超时(requestDatabitstamp,30000);
},
缓存:false
});
}
$(文档).ready(函数(){
图表=新
海图,海图({
colorAxis:{gridlineColor:'#4C'},
标记:{动画:'10000'},
图表:{renderTo:'container',
defaultSeriesType:“行”,
背景颜色:“#141414”,
边框颜色:“#00A578”,
plotbackgroundColor:“#161616”,
平行轴:{linecolor:'#4c'},
事件:{load:requestDatabitstamp}},
工具提示:{样式:{颜色:'#FFFFFF',
fontSize:'10px'},
背景颜色:“#141414”,
边界半径:'12'},
标题:{text:'Exchange Comparison'},
绘图选项:{系列:{
颜色:'#00A578'}},
xAxis:{type:'datetime',
像素间隔:150,
最大缩放:50*1000},
雅克斯:{minPadding:0.2,
最大填充:0.2,
标题:{文本:'USD',
边距:30},
系列:[{颜色:'#00A578',,
名称:'Bitstamp',
数据:[]
}]});});

我不是海图专家,但我看到的是,您只在chart.series[0]中填充点,因此只打印一个系列。每次交换都必须有一个系列

更新:


尝试在PHP文件中为每个交换创建一个填充数据的数组,并通过AJAX接收该数组,然后为chart.series[1]和chart.series[2]创建点。

明白了,下面是更新的代码。我尝试在错误的地方导入另一个系列

function requestData() {
$.ajax({
    url: 'php/binance.php',
    success: function(point) {
        var series = chart.series[0],
            shift0 = series.data.length > 50; // shift if the series is 
                                             // longer than 20

        // add the point
        chart.series[0].addPoint(point, true, shift0);

        // call it again after one second   
    },
    cache: false
});
$.ajax({
    url: 'php/bitstamp.php',
    success: function(point) {
        var series = chart.series[1],
            shift1 = series.data.length > 50; // shift if the series is 
                                             // longer than 20

        // add the point
        chart.series[1].addPoint(point, true, shift1);

        // call it again after one second  
    },
    cache: false
});
    $.ajax({
    url: 'php/bittrex.php',
    success: function(point) {
        var series = chart.series[2],
            shift2 = series.data.length > 50; // shift if the series is 
                                             // longer than 20

        // add the point
        chart.series[2].addPoint(point, true, shift2);

        // call it again after one second
        setTimeout(requestData, 10000);    
    },
    cache: false
});
}

到底是什么问题?数据是否已正确加载,但无法使用highcharts显示?或者在PHP中加载数据时已经有问题了吗?问题是我希望在图形上有多个点,但我不知道如何实现它,代码可以工作,但是当我尝试从另一个exchange获取图形上的另一个数据系列时,我失败了,例如,我想在图形上加载okex.PHP、binance.PHP和bistamp.PHP,单独来说,它们都可以工作,但我想将它们组合起来,不确定我需要做什么。然后我再问你一次:数据是否正确地打印到标记中,从而使你的问题是highcharts的配置?是的,数据很好,让它加载到highcharts组合中是我的问题,我尝试了很多方法来实现代码,以加载到另一个系列中,我确信这是我忽略的一个小问题,只需要引导到正确的方向。你能提供一个例子吗?我试过了,但没有得到想要的结果当你添加第三个系列和事件调用的第三个函数时会发生什么?它不起作用,我实际上只是找到了它,现在它起作用了:)你只是做了我告诉你的:)是的,你没有完全解释,但一切都很好,我是那种继续尝试的类型,你确实把我引向了正确的方向,我花了几个小时才弄清楚如何组织代码,raspect fam!