Highcharts Datepicker-多个系列

Question

I'm trying to use highcharts to visualize some numbers out of my database :) After fetching them from the db I'm encoding the outcome (currently 2 categories) as JSON: 我正在尝试使用highcharts将数据库中的一些数字可视化:)从数据库中获取它们后，我将结果（当前分为2类）编码为JSON：

Name 名称
Category 类别
Data 数据

[{"name":"Something 1","category":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,0,1,0,0,0,1,0,0,7,6,3,4,4,10,8,9,7,12,5,8,2,0]},{"name":"Something 2","category1":["2014-07-13 00:00:00","2014-07-13 01:00:00","2014-07-13 02:00:00","2014-07-13 03:00:00","2014-07-13 04:00:00","2014-07-13 05:00:00","2014-07-13 06:00:00","2014-07-13 07:00:00","2014-07-13 08:00:00","2014-07-13 09:00:00","2014-07-13 10:00:00","2014-07-13 11:00:00","2014-07-13 12:00:00","2014-07-13 13:00:00","2014-07-13 14:00:00","2014-07-13 15:00:00","2014-07-13 16:00:00","2014-07-13 17:00:00","2014-07-13 18:00:00","2014-07-13 19:00:00","2014-07-13 20:00:00","2014-07-13 21:00:00","2014-07-13 22:00:00","2014-07-13 23:00:00"],"data":[1,1,1,1,0,0,0,0,2,1,4,2,3,2,4,3,4,6,3,5,3,5,2,1]}]

which is later be used by my example.html file: 稍后将由我的example.html文件使用：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Diagram</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">

$(function () {
    var chart;
    $(document).ready(function() {
        $.getJSON("data.php", function(json) {
                    chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        type: 'line'
                    },
                    title: {
                        text: 'Something and Anything',
                        x: -20 //center
                    },
                    subtitle: {
                        text: 'bla bla bla',
                        x: -20
                    },
                    xAxis: {
                        categories: [],
                        labels: {
                                        align: 'center',
                                        x: -3,
                                        y: 30,
                                        formatter: function() {
                                        return Highcharts.dateFormat('%l%p', Date.parse(this.value +' UTC'));
                                        }
                                }
                    },
                    yAxis: {
                        title: {
                            text: 'Orders'
                        },
                        plotLines: [{
                            value: 0,
                            width: 0,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                this.x +':00 => '+ this.y;
                        }
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'top',
                        x: -10,
                        y: 100,
                        borderWidth: 0
                        y: 100,
                        borderWidth: 0
                    },
                    series: json
                });
            });

    });

});
        </script>
        </head>
        <body>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script src="http://code.highcharts.com/modules/exporting.js"></script>
        <!-- Bla Bla Bla Highcharts Container -->
        <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
        </body>
</html>

so far so good - what I finally want to add is the possibility of adding a datepicker now. 到目前为止非常好-我最后要添加的是现在可以添加日期选择器的可能性。 My "data.php" file is already able to handle a "Date" Parameter: 我的“ data.php”文件已经可以处理“日期”参数：

data.php?dateParam=2014-05-08

But still I'm not finding a valid way to add the datepicker into my code. 但是我仍然没有找到一种将日期选择器添加到我的代码中的有效方法。 Also wanted to let you know that I'm pretty new to JS and aware of the fact that this script could have been written way better... 还想让您知道我是JS的新手，并且知道这个脚本本来可以写得更好的事实...

So long and thanks for all the cheese, Jo3rg 这么久，感谢所有奶酪Jo3rg

Answer 1

A few tips 一些技巧

if you use categories, dateFormat will not work, it is based on timestamp 如果使用类别，dateFormat将不起作用，它基于时间戳
you should set type of xAxis (ie category) or datetime 您应该设置xAxis的类型（即类别）或日期时间
if you use datetime, your dates should be parsed to timestamp (Date.UTC functon or Date.parse() 如果使用datetime，则应将日期解析为时间戳（Date.UTC函数或Date.parse（）
in the series you should define which data is used, becuase your json is invalid (incorrect structure for highcharts) 在系列中，您应该定义要使用的数据，因为json无效（highcharts的结构不正确）

Highcharts Datepicker-多个系列

问题描述

1 个解决方案

解决方案1
0 2014-07-14 10:26:39

Highcharts Datepicker-多个系列

问题描述

1 个解决方案

解决方案1 0 2014-07-14 10:26:39

解决方案1
0 2014-07-14 10:26:39