0

我正在按照这个示例 使用来自服务器的数据加载一个高图（我在这里使用一个文件进行测试）。我希望不仅能够从服务器加载数据，而且能够加载整个数据。据我了解，这个简单的图表示例显示整个图表是一个 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>

这是我的 data.json 文件：

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

我没有收到任何错误，但是图表没有加载。我很感激任何帮助。

4

2 回答 2

1

我已经修好了。问题出在我的 data.json 文件上。getJson 函数不起作用，因为 data.json 不是有效的 json 文件，因为它期望所有属性都引用为字符串，否则它将不起作用。
我已经使用 JSONLint 验证器正确格式化了文件，现在它看起来像这样：

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

图表现在渲染得很好。谢谢您的帮助。

于 2013-09-15T23:04:52.683 回答
0

您的data对象缺少实际呈现图表所需renderTo的 属性chart，这也可能是一个问题。

例如，您可以将其设置document.body为，您的图表将呈现良好。

Fiddle

于 2013-09-15T20:59:44.103 回答