Highcharts学习笔记-饼状图（内存使用监视）

最新推荐文章于 2021-03-19 17:24:21 发布

最新推荐文章于 2021-03-19 17:24:21 发布 · 195 阅读

文章标签：

#js #highCharts #饼状图 #ViewUI

Groovy/Grails 同时被 3 个专栏收录

15 篇文章

订阅专栏

JavaScript

9 篇文章

订阅专栏

web设计（html+css）

4 篇文章

订阅专栏

本文介绍如何使用Highcharts库创建一个动态饼图，并通过POST请求从服务器获取数据进行图表展示。具体步骤包括设置Highcharts图表配置项、定义POST请求获取数据的方法以及将数据转换为图表所需的格式。

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、显示结果：