Highchart使用json格式数据lineDemo

 

 

<html>

<head>

    <title>Highcharts Example</title>

 

    <script type="text/javascript" src="/js/jquery-1.71.min.js"></script>

    <script type="text/javascript" src="/js/Calendar3.js"></script>

</head>

<body>

<script type="text/javascript">

    var ShowAjaxDate = {

        init: function(begin, end) {

            this.begin = begin;

            this.end = end;

            this.getNewBuy();

        },

        getNewBuy: function() {

            var _this = this;

            var param = {

                begin: this.begin,

                end: _this.end,

                callback: 'ShowAjaxDate.setAjaxDate'

            };

            $.ajax({

                url: ' /manage/newcustomflowquery.jsonp',

                data: param,

                dataType: 'script',

                success: function(r) {

                }

            });

        },

        setAjaxDate: function(r) {

            var allVisits = [];

            var showitem1="下单量";

 

            var pvVisitors = [];

            var showitem2="pv";

 

            var uvVisitors = [];

            var showitem3="uv";

 

            var datetime = [];

            for(i=0;i< r.listCustomFlowQuery.length;i++)

            {

                allVisits.push(r.listCustomFlowQuery[i].onlProNum);

                pvVisitors.push(r.listCustomFlowQuery[i].pv);

                uvVisitors.push(r.listCustomFlowQuery[i].uv);

                datetime.push(r.listCustomFlowQuery[i].dateTime);

            }

            var options = {

                chart: {

                    renderTo: 'container',

                    type: 'line'

                },

                title: {

                    text: 'Monthly Average Temperature'

                },

                subtitle: {

                    text: 'Source: WorldClimate.com'

                },

                exporting:{

                    enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮,不设置时默认为显示

                },

                credits: {

                    enabled: false

                },

                xAxis: {

                    categories: []

                },

                yAxis: {

                    title: {

                        text: '次数'

                    }

                },

                legend: {

                    align: 'left',

                    verticalAlign: 'top',

                    x: 60,

                    y: 10,

                    floating: true,

                    borderWidth: 0

                },

                tooltip: {

                    shared: true,

                    crosshairs: true

                },

                plotOptions: {

                    series: {

                        cursor: 'pointer',

                        point: {

                            events: {

                                click: function() {

                                    hs.htmlExpand(null, {

                                        pageOrigin: {

                                            x: this.pageX,

                                            y: this.pageY

                                        },

                                        headingText: this.series.name,

                                        maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+

                                                this.y +' visits',

                                        width: 200

                                    });

                                }

                            }

                        },

                        marker: {

                            lineWidth: 1

                        }

                    }

                },

                series: [{

                }, {

                },{

                }]

            };

            options.xAxis.categories=datetime;

            options.series[0].name = showitem1;

            options.series[1].name = showitem2;

            options.series[2].name = showitem3;

            options.series[0].data = allVisits;

            options.series[1].data = pvVisitors;

            options.series[2].data = uvVisitors;

            var chart = new Highcharts.Chart(options);

        }

    };

</script>

<div style="text-align: center;margin: 0 auto">

    <span>选择查询日期:</span> <span>从

                    <input name="control_date" type="text" id="control_date" size="10"

                           maxlength="10" onclick="new Calendar().show(this);" readonly="readonly" />

                    </span>

                <span>至

                    <input name="control_date2" type="text" id="control_date2" size="10"

                           maxlength="10" onclick="new Calendar().show(this);" readonly="readonly"/>

                    </span>

    <input type="button" name="button" id="button" value="查询" onclick="getUrlShowData();" />

    <script>

        function getUrlShowData()

        {

            var begin = document.getElementById("control_date").value;

            var end = document.getElementById("control_date2").value;

            ShowAjaxDate.init(begin,end);

        }

    </script>

 

</div>

<script src="/js/highcharts.js"></script>

<script src="/js/modules/exporting.js"></script>

<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

 

</body>

</html>

你可能感兴趣的:(highchart)