HighCharts中的Ajax请求的2D折线图

发布时间：2020-12-16 00:36:59 所属栏目：百科来源：网络整理

导读：HighCharts中的Ajax请求的2D折线图设计源码： !DOCTYPE htmlhtmlheadmeta charset="UTF-8"titleHighCharts 2D带Label的折线图/titlescript type="text/javascript" src="../scripts/jquery-1.11.0.js"/scriptscript type="text/javascript" src="../scripts

设计源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D带Label的折线图</title>
<script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
<script type="text/javascript" src="../scripts/js/highcharts.js"></script>
<script type="text/javascript">
     $(function(){
    	    // 获取CSV数据并且创建图
    	    $.get('data/lineAjax.csv',function (csv) {
    	        
    	        $('#lineAjaxChart').highcharts({

    	            data: {
    	                csv: csv
    	            },title: {
    	                text: '折线'
    	            },xAxis: {
    	                type: 'datetime',tickInterval: 7 * 24 * 3600 * 1000,// one week
    	                tickWidth: 0,gridLineWidth: 1,labels: {
    	                    align: 'left',x: 3,y: -3
    	                }
    	            },yAxis: [{ // 主Y轴
    	                title: {
    	                    text: null
    	                },y: 16,formatter: function() {
    	                        return Highcharts.numberFormat(this.value,0);
    	                    }
    	                },showFirstLabel: true
    	            },{ // 次Y轴
    	                linkedTo: 0,gridLineWidth: 0,opposite: true,title: {
    	                    text: null
    	                },labels: {
    	                    align: 'right',x: -3,showFirstLabel: false
    	            }],legend: {
    	                align: 'left',verticalAlign: 'top',y: 20,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: [{
    	                name: 'All visits',lineWidth: 4,marker: {
    	                    radius: 4
    	                }
    	            },{
    	                name: 'New visitors'
    	            }]
    	        });
    	    });
     });
</script>
</head>
<body>
   <div id="lineAjaxChart" style="width: 1200px; height: 500px; margin: 0 auto"></div>
</body>
</html>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!