企业快速开发平台Spring Cloud+Spring Boot+Mybatis之​Highcharts 基本饼图​

 Highcharts 基本饼图

 

以下实例演示了基本饼图。

我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。

需要框架源码的朋友可以看我个人简介联系我。(@获取源码+wx: haiwabbc2)


 

配置

series 配置

设置 series 的 type 属性为 pie ,series.type 描述了数据列类型。默认值为 "line"。

var series = {   type: 'pie'};

实例

文件名:highcharts_pie_basic.htm

Highcharts 教程 | 菜鸟教程(runoob.com)
$(document).ready(function() {      var chart = {       plotBackgroundColor: null,       plotBorderWidth: null,       plotShadow: false    };   var title = {      text: '2014 年各浏览器市场占有比例'       };          var tooltip = {      pointFormat: '{series.name}: {point.percentage:.1f}%'    };   var plotOptions = {      pie: {         allowPointSelect: true,         cursor: 'pointer',         dataLabels: {            enabled: true,            format: '{point.name}%: {point.percentage:.1f} %',            style: {               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'             }          }       }    };   var series= [{      type: 'pie',      name: 'Browser share',      data: [          ['Firefox',   45.0],          ['IE',       26.8],          {            name: 'Chrome',            y: 12.8,            sliced: true,            selected: true          },          ['Safari',    8.5],          ['Opera',     6.2],          ['Others',   0.7]       ]    }];                var json = {};       json.chart = chart;     json.title = title;         json.tooltip = tooltip;      json.series = series;    json.plotOptions = plotOptions;    $('#container').highcharts(json);   });

 

以上实例输出结果为:


请使用浏览器的分享功能分享到微信等