Highcharts日期picker -多个系列

Highcharts datepicker - multiple series

本文关键字：个系列 picker 日期 Highcharts      更新时间：2023-09-26

我正试图使用高图来可视化我的数据库中的一些数字:)从数据库中获取它们后，我将结果(目前为2个类别)编码为JSON:

    <
  • 名称/gh>
[{"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]}]

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

到目前为止都很好-我最后想添加的是现在添加日期选择器的可能性。我的"data.php"文件已经能够处理一个"Date"参数:

data.php?dateParam=2014-05-08

但是我仍然没有找到一个有效的方法来添加日期选择器到我的代码。我还想让你知道，我对JS很陌生，并意识到这一事实这个剧本本可以写得更好…

再见，谢谢你的奶酪。Jo3rg

几点建议

  • 如果你使用分类，dateFormat将不起作用，它是基于时间戳的
  • 你应该设置类型的xAxis(即类别)或日期时间
  • 如果你使用datetime，你的日期应该被解析为时间戳(日期)。UTC函数或Date.parse()
    • 在
  • 中，你应该定义使用哪些数据，因为你的json是无效的(highcharts的结构不正确)
相关文章：