如何在highcharts中用json文件数据绘制图表

Question

我的json.data文件和我的index.html文件在同一个目录中。data.json文件如下所示：

  {
 data:
    [
          [1369540800000,20]
    ]
}

当我这样做的时候：

alert(JSON.stringify(jsonData, null, 4));

我得到了这个，所以我得到了值。还是不知道出了什么问题。

{
   "data":[
    [
      1369540800000,
          10
        ],
        [
          1369541700000,
          20
    ]
      ]
}

我的html文件包括用于构建图表的java脚本，如下所示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
        <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>HIGHTCHARTS</title>

                <style>

                        body
                        {
                                font: 10px arial;
                        }

                </style>

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

                $(function () {
                            var chart;
                            $.getJSON('data.json', function(jsonData) {
                                chartOptions.series = jsonData;
                                chart = new Highcharts.Chart(chartOptions);
                            });

                            var chartOptions = {
                                chart: {
                                    renderTo: 'container'
                                },
                                xAxis: {
                                    type: 'datetime'
                                },

                                series: []
                            };
                        });
                </script>


        </head>

        <body>
               <div id="container" style="width:100%; height:400px;"></div>
        </body>

</html>

我看到了图表标题，但没有看到任何图表或数据点。这里我漏掉了什么？

Answer 1

为了让它工作，我必须这样做：

<script src="js/highcharts.js"></script>


     <script type="text/javascript">

        $(document).ready(function() {
                var options = {
                    chart: {
                        renderTo: 'container',
                        type: 'area'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                series: [{}]
                };

            $.getJSON('dude.json', function(data) {
                options.series[0].data = data;
                var chart = new Highcharts.Chart(options);
            });

        });
     </script>

Answer 2

您的数据格式不正确。熟悉如何设置Highcharts的数据格式。

这些可能会有所帮助：

• http://api.highcharts.com/highcharts#series.data
• http://docs.highcharts.com/#preprocesssing-data-from-a-file

值得注意的是：

1)日期必须是javascript时间戳(纪元时间，以毫秒为单位)或date.Utc声明

2)你的结构需要像这样：

[[date, value],[date,value],[date,value]]