2

我试图让 highcharts 通过 AJAX 查询动态更新图表。目前，我让服务器为新图表返回 JSON，然后我使用 parseJSON 对其进行解析。这一切都很好，除了一件事——highcharts 代码的通常格式不是真正的 JSON，因此文件中的图表格式不同。（例如，对于正确的 JSON，type: 'bar' 必须变为 "type": "bar"。）

这是主页的代码：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>
$(function () {
        $('#container').highcharts({
            title: {
                text: 'Monthly Average Temperature',
                x: -20,
                style: {
                    color: 'rgb(103,103,103)',
                    fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif'
                }
            },
            subtitle: {
                text: 'Source: WorldClimate.com',
                x: -20,
                style: {
                    color: 'rgb(103,103,103)'
                }
            },
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            yAxis: {
                title: {
                    text: 'Temperature (C)',
                    style: {
                        color: 'rgb(103,103,103)'
                    }
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'Tokyo',
                color: 'rgb(62,144,200)',
                data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
                point: {
                    events: {
                        click: function() {
                            $.get('thetest/test.php', function (data) {
                                var temp=jQuery.parseJSON(data);
                                $('#container').highcharts(temp);
                            })
                        }
                    }
                }
            }, {
                name: 'New York',
                color: 'rgb(128,183,101)',
                data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
            }, {
                name: 'Berlin',
                color: 'rgb(145,111,79)',
                data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
            }, {
                name: 'London',
                color: 'rgb(207,186,132)',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }, {
                name: 'Last One',
                color: 'rgb(70,95,119)',
                data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8]
            }]
        });
    });
</script>

这是返回的 JSON：

{
    "chart": {
        "type": "bar"
    },
    "title": {
        "text": "Historic World Population by Region"
    },
    "subtitle": {
        "text": "Source: Wikipedia.org"
    },
    "xAxis": {
        "categories": ["Africa", "America", "Asia", "Europe", "Oceania"],
        "title": {
            "text": null
        }
    },
    "yAxis": {
        "min": 0,
        "title": {
            "text": "Population (millions)",
            "align": "high"
        },
        "labels": {
            "overflow": "justify"
        }
    },
    "tooltip": {
        "valueSuffix": " millions"
    },
    "plotOptions": {
        "bar": {
            "dataLabels": {
                "enabled": true
            }
        }
    },
    "legend": {
        "layout": "vertical",
        "align": "right",
        "verticalAlign": "top",
        "x": -40,
        "y": 100,
        "floating": true,
        "borderWidth": 1,
        "backgroundColor": "#FFFFFF",
        "shadow": true
    },
    "credits": {
        "enabled": false
    },
    "series": [{
        "name": "Year 1800",
        "data": [107, 31, 635, 203, 2]
    }, {
        "name": "Year 1900",
        "data": [133, 156, 947, 408, 6]
    }, {
        "name": "Year 2008",
        "data": [973, 914, 4054, 732, 34]
    }]
}

这当然可以完美地工作......但是有没有办法以标准“highcharts”格式而不是JSON格式从test.php传回结果？

4

4 回答 4

2

这里有一个误解...... Highcharts 没有专门为它设计的配置“格式”，就您在问题中提出的问题而言。Highcharts 采用 Javascript 配置对象，这与 JSON 不同。

你是否听说过这样的说法：“每个正方形都是矩形，但每个矩形都不是正方形”？这句话的相似之处在于所有的 JSON 都可以解释为 Javascript，但并非所有的 Javascript 都可以解释为 JSON。这很重要，因为这意味着 JSON 可以被视为 Javascript 的子集，这意味着它可以被解释为 JavaScript（尤其是 Javascript 对象）。然后，您可以从服务器返回 JSON 并将其转换为 JavaScript 对象，以用作您的 anychart 配置对象。

这是相关的原因是它看起来从您的服务器返回的是一个 Javascript 对象定义（这是 Highcharts 实际使用的），而不是 JSON。问题是您需要将文本转换为 Javascript 并作为 Javascript 运行。这种情况有两种解决方案，其中一种比另一种要好得多。

  1. 由于您当前将 Javascript 对象作为文本返回，您可以在该对象上使用 eval() 函数。这是一个糟糕的决定，有一种说法是“eval is evil”。出于所有原因，您可以在线查找，但您可以毫无问题地使用此路线。

  2. 另一种选择是当你最初存储你的 highcharts 配置时，或者当你从你的 php 文件中返回它时，你可以确保语法符合 JSON 格式。在您的示例中，这看起来不会对您的程序工作方式产生任何影响，只是更难实现。这是解决此问题的正确方法。

于 2013-10-03T13:58:04.073 回答
2

我将建议另一种方法。

正如 Reimius 所说，Highcharts 使用 Javascript 对象进行图表配置。配置可以是非常基本的 Javascript 对象，不涉及任何函数，在这种情况下，您可以将其解析为 json 并在客户端使用它，通过 Ajax 调用获取它。不过，我认为这将是非常严格的。

我过去通过将服务器端生成的 Javascript 配置文件像任何其他 Javascript 文件一样包含到 html 中来克服了这个问题。最后，这就是在浏览器中访问和运行 Javascript 代码的方式。

例如，假设我想在我的页面上将所选城市的温度显示为图表，并且我有一个端点来获取如下配置：

<server-address>/temperature/<id>

我从这个端点得到的是一个 getter 函数，如下所示：

function getChartConfig() {
  return {
        title: {
            text: 'Monthly Average Temperature',
            x: -20,
            style: {
                color: 'rgb(103,103,103)',
                fontFamily: '"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif'
            }
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20,
            style: {
                color: 'rgb(103,103,103)'
            }
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (C)',
                style: {
                    color: 'rgb(103,103,103)'
                }
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            color: 'rgb(62,144,200)',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            point: {
                events: {
                    click: function() {
                        $.get('thetest/test.php', function (data) {
                            var temp=jQuery.parseJSON(data);
                            $('#container').highcharts(temp);
                        })
                    }
                }
            }
        }, {
            name: 'New York',
            color: 'rgb(128,183,101)',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            color: 'rgb(145,111,79)',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            color: 'rgb(207,186,132)',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }, {
            name: 'Last One',
            color: 'rgb(70,95,119)',
            data: [13.9, 14.2, 15.7, 18.5, 21.9, 25.2, 27.0, 26.6, 24.2, 20.3, 16.6, 14.8]
        }]
    });
}

}

那么你的 html 源代码如下：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<!-- Notice Highcharts configuration is included as a javascript file -->
<script type='text/javascript' src='<server-address>/temperature/1'></script>   

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script>
$(function () {
    $('#container').highcharts(getChartConfig());
</script>

现在，您不必以静态方式包含它，您可以使用 JQuery getScript 函数或其他方式动态加载 Javascript。

我不确定这是否符合您的需求，但您明白了。我相信您可以将逻辑应用于您的需求。这在过去对我有用。

于 2015-10-05T12:26:43.627 回答
0

如果我理解正确，您需要做的就是将 JSON 字符串解析为一个对象：

var json = '{ "chart": { "type": "bar" } }',
    parsed = JSON.parse(json);

$('#container').highcharts(parsed);

http://jsfiddle.net/3QG6Q/

于 2013-10-03T12:48:10.290 回答
0

是的，您需要获取 JSON，它可以通过 json_encode() 函数在 php 中返回。

于 2013-10-03T13:02:42.077 回答