在没有解析 JSON 的情况下获取高图表数据

Get highcharts data without parseJSON

本文关键字:情况下 获取 高图表 数据 JSON      更新时间:2023-09-26

我正在尝试让高图表通过 AJAX 查询动态更新图表。目前,我让服务器为新图表返回 JSON,然后我使用 parseJSON 对其进行解析。这一切都很好,除了一件事 - highcharts 代码的通常格式不是真正的 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]
    }]
}

这当然是完美的...但是有没有办法以标准的"highcharts"格式而不是 JSON 格式从测试中传回结果.php?

这里有一个误会... Highcharts没有专门为它设计的配置"格式",即您在问题中提出的问题。 Highcharts采用Javascript配置对象,这与JSON不同。

如果你听说过这样一句话:"每个正方形都是一个矩形,但每个矩形都不是正方形"? 这种说法类似于所有JSON都可以解释为Javascript,但并非所有Javascript都可以解释为JSON。 这很重要,因为这意味着JSON可以被视为Javascript的子集,这意味着它可以被解释为JavaScript(特别是Javascript对象(。 然后,您可以从服务器返回 JSON,并将其转换为 JavaScript 对象以用作您的 anychart 配置对象。

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

  1. 由于您当前以文本形式返回 Javascript 对象,因此您可以在该对象上使用 eval(( 函数。 这是一个糟糕的决定,有一种说法是"eval 是邪恶的"。 出于所有原因,您可以在线查找,但您可以毫无问题地使用此路线。

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

我将建议另一种方法。

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

过去,我克服了这个问题,将服务器端生成的Javascript配置文件包含在html中,就像任何其他Javascript文件一样。最后,这是在浏览器中访问和运行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。

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

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

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

http://jsfiddle.net/3QG6Q/

是的,你需要获取 JSON,这可以通过 json_encode(( 函数在 php 中返回。