Question

我正在关注此example 使用来自服务器的数据加载高图（我在这里使用文件进行测试）。我希望不仅可以从服务器加载数据，而且可以加载整个数据。据我所知，this简单的图表示例显示整个图表是一个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]
        }
    ],
}

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

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

图表现在正常呈现。谢谢你的帮助。

Answer 2

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

例如，您可以将其设置为document.body，并且您的图表将会正常呈现。

renderTo

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

2 个答案: