用highcharts動態擷取值,以及x軸值可以改變

來源:互聯網
上載者:User

<script type="text/javascript">
        $(document).ready(function (){
        var options = {
                chart: {
                    renderTo: 'container',
                    defaultSeriesType: 'spline', //圖表類型 line, spline, area, areaspline, column, bar, pie , column,scatter
                    inverted: false //左右顯示,預設上下正向。假如設定為true,則橫縱座標調換位置
                },
                xAxis: {
                   categories:[],
                    title: {text: '時間'}  //x軸座標標題  labels:縱柱尺規
                },
                yAxis: {
                    title: {text: '點擊量'},  //Y軸座標標題  labels:縱柱尺規
                    min:0
                },
                tooltip: {
                    formatter: function() {
                        //當滑鼠懸置資料點時的格式化提示
                        return '總人數:' + Highcharts.numberFormat(this.y, 1)+'人<br/>目前時間:'+ this.x ;
                    }
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,  //圖表柱形的
                        borderWidth: 0      //圖表柱形的粗細
                    },bar: {
                        dataLabels: {
                            enabled: false
                        }
                    }
                },
                title: { text: '指定時間點擊量統計圖'}, //圖表主標題
             series:[]
            };
             $("#btn").click(function(){
               $.post("/tgSpreadServlet",{page:"dayget",sdate:$("#sdate").val(),edate:$("#edate").val(),surl:$("#sUrl").val()},function(data){
              var sd=$("#sdate").val();
               var ed=$("#edate").val();
               //計算相差天數
               var datediff=DateDiff(sd, ed);
               for(var i=0;i<datediff;i++){
                 var s=AddDays(sd,i);
                 options.xAxis.categories.push(s);
               }
              data=eval("("+data+")");
              options.series.push(data);
              var chart=new Highcharts.Chart(options);
              });
            });
                      
        });
    
       

 </script>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.