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 文件的情况下通过本地服务器的按需数据填充高图？

一切都在同一个/本地服务器上。报告软件有一个 web 元素，可以查询 SQL 数据库并返回数据集。

基本上我想替换这个：

$.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 来填充 Highcharts。这里的关键是在 .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 回答