javascript - 不用parseJSON获取highcharts数据

Question

我试图让 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 传回结果？

Answer 1

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

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

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

1. 由于您目前正在将 Javascript 对象作为文本返回，因此您可以对该对象使用 eval() 函数。这是一个错误的决定，俗话说“eval is evil”。至于为什么会这样，你可以上网查一下，但你可以毫无问题地使用这条路线。

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