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

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

highcharts

如何在highcharts中使用json文件数据绘制图表,highcharts,Highcharts,我的json.data文件与index.html文件位于同一目录中。data.json文件如下所示： { data: [ [1369540800000,20] ] } 当我这样做时： alert(JSON.stringify(jsonData, null, 4)); 我得到这个，所以我得到了值。还是不知道怎么了 { "data":[ [ 1369540800000, 10 ],

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


海查特
身体
{
字体：10px arial；
}
$（函数（）{
var图；
$.getJSON（'data.json'，函数（jsonData）{
chartOptions.series=jsonData；
图表=新的Highcharts.chart（图表选项）；
});
var图表选项={
图表：{
renderTo:“容器”
},
xAxis：{
键入：“日期时间”
},
系列：[]
};
});

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

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

这些措施可能有助于：

值得注意的是：

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

2）您的结构需要如下所示：

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

这就是我要做的，让它工作：

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


$（文档）.ready（函数（）{
变量选项={
图表：{
renderTo:'容器'，
类型：“区域”
},
xAxis：{
键入：“日期时间”
},
系列：[{}]
};
$.getJSON（'dude.json'，函数（数据）{
options.series[0]。数据=数据；
var图表=新的Highcharts.图表（选项）；
});
});

@jbringgs，我就是这么做的，我仍然没有在图表上看到任何数据点。[[1369540800,14.84]，[1369540800,14.84]]将时间戳乘以1000-在Javascript中，时间戳应以毫秒为单位。@PawełFus，我将其乘以1000，我仍然看不到图表上的任何数据点。我的data.json文件如下所示：[[1369540800000,10]，[1369541700000,20]，[1369542600000,50]，[1369543500000,45]，[1369544400000,45]，[1369545300000100]]您需要确保在series对象的正确级别添加数据。您的最终产品需要是“series:[{data:[[date，value]，[date，value]}]”@jlbiggs，我刚刚在帖子中更新了我的json数据。它仍然不起作用。我只需要把这件事做好。