Highcharts學習筆記-餅狀圖(內存使用監視)

function show(arr) {
      //alert(arr);
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
          formatter: function() {
            return '<b>' + this.point.name + '</b>: ' + this.y + ' MB';
          }
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function() {
                return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
              }
            }
          }
        },
        series: [
          {
            type: 'pie',
            name: 'Browser share',
            data: arr
          }
        ]
      });
    }

 2、post請求數據

$.post("${createLink(controller:'main',action:'pie')}", {type:'json'}, function(data) {
        var arr = new Array();
        for (var i = 0; i < data.length; i++) {
          var tmp = new Array();
          tmp[0] = data[i].name;
          tmp[1] = data[i].memSize/1024;
          arr[i] = tmp;
        }
        show(arr);
      });

3、顯示結果:


 

  • 5e08b31c-3817-328d-838f-33328bd50f4e-thumb.png
  • 大小: 90.7 KB
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章