ハイチャートデータモジュールJSON APIコールsetTimeout 30 sek

ハイチャートのドキュメントに従ってください。ドメイン外のJSONファイルに対してjQuery.getJSON()関数を使用することはできません。ただし、JSONPを使用することは可能です。ドメイン間データ。これは彼らの例です：出典： https://www.highcharts.com/docs/working-with-data/getting-data-across-domains-jsonp ハイチャートデータモジュールJSON APIコールsetTimeout 30 sek

サーバーサイドPHPファイル：

<?php 
    header("content-type: application/json"); 

    $array = array(7,4,2,8,4,1,9,3,2,16,7,12); 

    echo $_GET['callback']. '('. json_encode($array) . ')'; 
?>

JavaScriptはjQueryのを使用してコールバック関数を呼び出します。

$(document).ready(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     series: [{}] 
    }; 

    var url = "http://url-to-your-remote-server/jsonp.php?callback=?"; 
    $.getJSON(url, function(data) { 
     options.series[0].data = data; 
     var chart = new Highcharts.Chart(options); 
    }); 
});

は、どのように私は例えば30秒でのsetTimeout要求で、ライブデータのJSON API呼び出しと同じことをしますか？

JSONライブデータのURL： https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json

を私は2日間、この答えを検索しました、私はこの例を見つけることができ、ない外部のURLから、ランダムなデータを作成jQuery ajax()機能を使用して、異なるアプローチであるように思われます：独自のAPIを使用した

https://www.highcharts.com/docs/working-with-data/live-data

修正コード：

<html> 

<head> 
    <title>Team memberttttts received and sent eCards</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
<script> 
     function visitorData (data) { 
    $('#container').highcharts({ 
    chart: { 
     type: 'column' 
    }, 
    title: { 
     text: 'Average Visitors' 
    }, 
    xAxis: { 
        type: 'datetime', 
        labels: { 
         formatter: function() { 
          return Highcharts.dateFormat('%b %e. %Y', this.value, 1); 
         } 
        } 
       }, 
    yAxis: { 
     title: { 
      text: 'Number of visitors' 
     } 
    }, 
    series: data, 
    }); 
} 
$(document).ready(function() { 
$.ajax({ 
    url: 'http://marialaustsen.com/apii.json?callback=?', 
    type: 'GET', 
    async: true, 
    dataType: "json", 
    success: function (data) { 
     visitorData(data); 
    } 
    }); 
}); 
    </script> 
</head> 

<body> 
    <div id="container" style="width: 75%; height: 500px; margin: 0 auto"></div> 


</body> 

</html>

Iは、APIファイルのヘッダを除去し、角括弧と中括弧を置換：
[ [ "タイムスタンプ"： "1262304000"、 "eカード送信"： "843"、 "送信認識"： "736" 、 "受信Eカード"： "21"、 "受信認識"： "4311"]
] は私がコンソールにこのエラーが表示されます。marialaustsen.com/apii.json?callback=jQuery321017746123134921787_1514030331673 & _ = 1514030331674：2キャッチされないでSyntaxError ：予期しないトークン：

apiリクエストを自動的に更新できるようにするためには、ハイチャートのjson APIを正しく取得または出力する方法を見つける必要があります。私はどこかでhighchartsはミリ秒単位のタイムスタンプしか読んでいないが、構文が間違っていてデータフォーマットではないように思える。

出典

2017-12-19 user7720911

このデモはあなたのための役に立つかもしれません：http://jsfiddle.net/kkulig/dv74ze6n/

私は非同期getJSON要求を処理するために約束を使用しています。このトピックの解決策は、私が別のドメインにリクエストを実行することができます。Changing getJSON to JSONP

全コード：

function getData() { 
    return new Promise((resolve, reject) => { 
    $.getJSON('https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=10&type=json&callback=?', function(recData) { 
     resolve(recData); 
    }); 
    }); 
} 

(async() => { 
    Highcharts.chart('container', { 

     chart: { 
     events: { 
     load: function() { 
      var series = this.series[0]; 
      setInterval(async function() { 
      var data = await getData(); 
      series.setData(data); 
      }, 2000); 
     } 
     } 
    }, 

    series: [{ 
     data: await getData() 
    }] 

    }); 
})();

ライブデモ：助けをhttp://jsfiddle.net/kkulig/dv74ze6n/

出典

2017-12-21 15:44:05

感謝。私はHighchartsが外部のjsonデータとどのように連携するかについて非常に混乱しています.Hotcharts自身のソースからオンラインで入手したほとんどの例では、複雑な、あるいは外部のapiの例はあまりありません。このデータのURLは次の形式です：？（[[1,6]、[2,5]、[3,8]、[4,12]、[5,7]、[6,7]、[7,10]、[8,9] [9,13]、[10,10]]）;私はデータベースからJSONファイルを次の形式でエクスポートしました：[{"タイムスタンプ"： "1262304000"、 "送信済みecards"： "843"、 "受信済み"： "736"、 "受信済みecards"： "21" 、 "Received recognition"： "4311"}] http://marialaustsen.com/api.json URLを介してこのデータをハイチャートにどのように取得できますか？どうもありがとう！ – user7720911

このドキュメントページでは、Highcharts/Highstockが受け入れるデータ形式を明確にする必要があります：https://www.highcharts.com/docs/chart-concepts/series（*シリーズのデータ段落）。 Highstockは常に** datetime **型のx軸を使用しますので、この記事も参考にしてください。https://www.highcharts.com/docs/chart-concepts/axes（* DATETIME *段落） Highchartsで受け入れ可能なフォーマットになるようにデータを準備するか、** keys **プロパティを使用してデータを準備することができます：https://api.highcharts.com/highcharts/plotOptions.series.keys –

ハイチャートデータモジュールJSON APIコールsetTimeout 30 sek

答えて

関連する問題