Javascript 在服务器端创建整个highchart对象_Javascript_Jquery_Json_Highcharts

Javascript 在服务器端创建整个highchart对象

javascript jquery json highcharts

Javascript 在服务器端创建整个highchart对象,javascript,jquery,json,highcharts,Javascript,Jquery,Json,Highcharts,我正在关注这个使用服务器上的数据加载highchart（我在这里使用一个文件进行测试）。我希望不仅能够从服务器加载数据，而且能够从整个服务器加载数据。据我所知，简单的图表示例显示整个图表是一个json对象，因此我认为如果我像这样创建json代码，并将其加载到一个对象中，然后将其传递给图表，它就会工作。为了做到这一点，我想出了以下代码： <html> <head> <script src="http://ajax.googleapis.co

我正在关注这个使用服务器上的数据加载highchart（我在这里使用一个文件进行测试）。我希望不仅能够从服务器加载数据，而且能够从整个服务器加载数据。据我所知，简单的图表示例显示整个图表是一个json对象，因此我认为如果我像这样创建json代码，并将其加载到一个对象中，然后将其传递给图表，它就会工作。为了做到这一点，我想出了以下代码：

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getJSON('data.json', function(data) {
                    var chart = new Highcharts.Chart(data);
                });
            }); 
        </script>
    </head>
    <body>
        <div id="container" style="width:100%; height:100%;"></div>    
    </body>
</html>

我没有收到任何错误，但是图表没有加载。非常感谢您的帮助。

您的

数据

对象缺少

图表

的属性，实际渲染图表时需要该属性，这可能也是一个问题

例如，您可以将其设置为

document.body

，这样您的图表就会呈现良好效果

我已经修好了。问题在于我的data.json文件。getJson函数无法工作，因为data.json不是有效的json文件，因为它希望所有属性都以字符串形式引用，否则它将无法工作。
我已使用JSONLint validator正确格式化了文件，现在看起来是这样的：

{
    "chart": {
        "type": "bar",
        "renderTo": "container"
    },
    "title": {
        "text": "Fruit Consumption"
    },
    "xAxis": {
        "categories": [
            "Apples",
            "Bananas",
            "Oranges"
        ]
    },
    "yAxis": {
        "title": {
            "text": "Fruit eaten"
        }
    },
    "series": [
        {
            "name": "Jane",
            "data": [
                1,
                0,
                4
            ]
        },
        {
            "name": "John",
            "data": [
                5,
                7,
                3
            ]
        }
    ]
}

图表现在呈现良好。谢谢您的帮助。

将

数据

记录到控制台，看看它是否正是您所期望的对象结构。除此之外：请选择Live example。我尝试将数据记录到控制台，但看起来getJson函数没有执行。很抱歉使用了实时代码，我还尝试创建了一个带有示例的JSFIDLE，但我没有帐户，而且由于垃圾邮件机器人，FIDLE目前不允许注册。一旦注册可用，我将创建示例。谢谢你的提示。你不需要注册JSFIDLE来保存一把小提琴……谢谢你指出这一点。我在我的原始代码中设置了renderTo属性，只是忘了将其放在示例中。不过，你的计划并没有模拟我想要实现的目标。将图表静态定义到变量中，而不是从外部json文件或服务器（如果愿意）加载它。
问题似乎出在getJson函数上，因为它看起来没有执行。有什么想法吗？

{
    "chart": {
        "type": "bar",
        "renderTo": "container"
    },
    "title": {
        "text": "Fruit Consumption"
    },
    "xAxis": {
        "categories": [
            "Apples",
            "Bananas",
            "Oranges"
        ]
    },
    "yAxis": {
        "title": {
            "text": "Fruit eaten"
        }
    },
    "series": [
        {
            "name": "Jane",
            "data": [
                1,
                0,
                4
            ]
        },
        {
            "name": "John",
            "data": [
                5,
                7,
                3
            ]
        }
    ]
}