highcharts - 如何在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>

我看到图表标题，但没有看到任何图表或数据点。我在这里想念什么？

score 2 · Accepted Answer

您的数据格式不正确。熟悉如何为 Highcharts 格式化数据。

这些可能会有所帮助：

尤其：

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

2）你的结构需要像：

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

score 0 · Accepted Answer

这是我必须做的让它工作：

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

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

2 回答 2

Related

Reference