0

私は HighCharts / HighStocks をいじっており、PHP ファイルを使用せずにレポート ソフトウェアからグラフにデータを自動的に渡そうとしていますが、構文を正しくする方法がわかりません。

率直に言って、これは私のリーグ外だと思います。私は AJAX/Javascript/JSON コーダーではありません。私のスキルは別の場所にあるので、ここで約 40 ページのスレッドを調べて読んだ後、誰かが私を助けてくれることを願っています.

この例をローカルで使用すると問題なく動作することは明らかですが、get JSON 行でソース データを変更しようとすると、空のページまたはグラフが表示されません。私はこれでかなり長い間頭を壁にぶつけてきましたが、運がありません.

HTML コード:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highstock Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
// Create the chart
window.chart = new Highcharts.StockChart({
chart : {
renderTo : 'Container'
},
rangeSelector : {
selected : 1
},
title : {
text : 'This is the header'
},
series : [{
name : 'AAPL',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});
 </script>
</head>
<body>
<script src="../js/highstock.js"></script>
<script src="../js/modules/exporting.js"></script>
<div id="Container" style="height: 500px; min-width: 500px;"></div>
<p>Testing</p>
</body>
</html>

私が見る限り、これは私が変更する必要がある行です:

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {

私のローカル サーバーでは、次のリンクを使用してレポート ツール (SQL データベースから読み取る) からデータを抽出できます。

//localserver/query=ZZZ

これは次のように出力されます。

[{f1:"[[1338732000000,29119.439],"},
{f1:"[1338818400000,30367.229],"},
{f1:"[1338904800000,29221.893],"},
{f1:"[1339336800000,29640.756]]"}]

または、次のように渡すことができます。

[[1338732000000,29119.439],
[1338818400000,30367.229],
[1338904800000,29221.893],
[1338991200000,31075.204],
[1339077600000,29449.717],
[1339336800000,29640.756]]

上記のデータ形式が、HighCharts で期待されるものとわずかに異なることを理解しています。

私の質問は次のとおりです。

a) PHP ファイルを使用せずに、ローカル サーバーからオンデマンドでデータを介してハイチャートに入力することは可能ですか?

すべてが同じ/ローカルサーバー上にあります。レポート ソフトウェアには、SQL データベースにクエリを実行し、データ セットを返す Web 要素があります。

基本的に私はこれを置き換えたい：

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) {

これとともに：

$.getJSON('http://localserver/query=ZZZ', function(data) {

レポート ソフトウェアでは、ユーザーが日付、変数 (国など) などを変更できるため、チャートを更新したいと考えています。

b) HTML 内の JavaScript のデータを解析/変換できますか?

私が抱えている問題の半分は、レポート ソフトウェアと Highcharts Javascript をハンドシェイクすることだと思います。彼らのサイトからローカルの csv の例を試してみましたが、まったく機能せず、完全な html/javascript の例がどこにも見つかりません。

前もって感謝します！

4

1 に答える 1

0
  • はい、SQL クエリから生成された JSON を使用してハイチャートにデータを入力できます。ここで重要なのは、.getJSON コールバック関数内でチャートを初期化し、JSON データをループしてポイントをチャートに追加することです。

うまくいけば、開始するためのサンプルコードを次に示します。

<script type="text/javascript">
    var chart = null;

    function createChart() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'line',
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: 'Time'
                }
            },
            yAxis: {
                title: {
                    text: 'Some data'
                }
            },
            series: [{
                data: [],
                name: 'some data',
                type: 'line'
            }],
        });
    }

    $(document).ready(function() {
        // Fetch JSON...
        $.getJSON('http://localhost/script.php', function(res, textStatus, jqXHR) {
            if (res.success) {
                // Populate the chart...
                var points = [];
                $.each(res.points, function(i, val) {
                    points.push({ x : val.x, y : val.y });
                });
                createChart();
                chart.series[0].setData(points);
            }
        });
    });
</script>
于 2012-08-03T07:03:06.150 に答える