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

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

这些可能有所帮助：

值得注意的是：

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

2）你的结构需要像：

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

Answer 2

这是我必须做的才能让它发挥作用：

<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中使用json文件数据绘制图表

2 个答案: