Question

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

以下是主页的代码：

<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]
    }]
}

这当然完美无缺......但是有没有办法将结果从test.php传回标准的“highcharts”格式而不是JSON？

Answer 1

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

如果您曾经听过这样的说法：“每个正方形都是一个矩形，但每个矩形都不是正方形”？这种说法类似，因为所有JSON都可以解释为Javascript，但并非所有Javascript都可以解释为JSON。这很重要，因为这意味着可以将JSON视为Javascript的子集，这意味着它可以被解释为JavaScript（特别是Javascript对象）。然后，您可以从服务器返回JSON并将其转换为JavaScript对象，以用作anychart配置对象。

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

由于您当前正在将Javascript对象作为文本返回，因此可以在该对象上使用eval（）函数。这是一个糟糕的决定，有一种说法“eval是邪恶的”。出于这种原因的所有原因，您可以在线查找，但您可以毫无问题地使用此路线。
另一个选项是当您最初存储highcharts配置时，或者当您从php文件返回它时，您可以确保语法符合JSON格式。在您的示例中看起来，这对您的编程方式没有任何影响，实现起来会更难。这是解决此问题的正确方法。

Answer 2

我将建议另一种方法。

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

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

E.g。假设我想在我的页面上以图表的形式显示所选城市的温度，并且我有一个端点来获取如下配置：

<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。

我不确定这是否符合您的需求，但您明白了。我相信你可以根据自己的需要应用逻辑。这对我来说过去很有用。

Answer 3

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

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

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

http://jsfiddle.net/3QG6Q/

Answer 4

是的，你需要获得JSON，它可以通过json_encode（）函数在php中返回。

在没有parseJSON的情况下获取highcharts数据

4 个答案: