$(function () { var colors = Highcharts.getOptions().colors, categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], name = 'Browser brands', data = [{ y: 55.11, color: colors[0], drilldown: { name: 'MSIE versions', categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], data: [10.85, 7.35, 33.06, 2.81], color: colors[0] } }, { y: 21.63, color: colors[1], drilldown: { name: 'Firefox versions', categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], data: [0.20, 0.83, 1.58, 13.12, 5.43], color: colors[1] } }, { y: 11.94, color: colors[2], drilldown: { name: 'Chrome versions', categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], color: colors[2] } }, { y: 7.15, color: colors[3], drilldown: { name: 'Safari versions', categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 'Safari 3.1', 'Safari 4.1'], data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], color: colors[3] } }, { y: 2.14, color: colors[4], drilldown: { name: 'Opera versions', categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], data: [ 0.12, 0.37, 1.65], color: colors[4] } }]; // Build the data arrays var browserData = []; var versionsData = []; for (var i = 0; i < data.length; i++) { // add browser data browserData.push({ name: categories[i], y: data[i].y, color: data[i].color }); // add version data for (var j = 0; j < data[i].drilldown.data.length; j++) { var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ; versionsData.push({ name: data[i].drilldown.categories[j], y: data[i].drilldown.data[j], color: Highcharts.Color(data[i].color).brighten(brightness).get() }); } } // Create the chart $('#container').highcharts({ chart: { type: 'pie' }, title: { text: 'Browser market share, April, 2011' }, yAxis: { title: { text: 'Total percent market share' } }, plotOptions: { pie: { shadow: false, center: ['50%', '50%'] } }, tooltip: { valueSuffix: '%' }, series: [{ name: 'Browsers', data: browserData, size: '60%', dataLabels: { formatter: function() { return this.y > 5 ? this.point.name : null; }, color: 'white', distance: -30 //离圆弧边缘的距离,负数靠近圆心;若label在饼图内则自动不显示连接线 } }, { name: 'Versions', data: versionsData, size: '80%', innerSize: '60%', dataLabels: { formatter: function() { // display only if larger than 1 return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; }, softConnector:true } }] }); });
相关推荐
highcharts简单的饼图demo,按照需求更改
Highcharts-3.0,内含丰富的曲线,棒图和饼图等等几十个例子。
一个页面,两个双饼图,至于双饼图长什么样,自己去官网查看
highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用。 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。 首先使用 ...
利用highCharts绘制饼图和柱状图
Highcharts 图表 统计图 3d 饼图 柱状图 html5统计图 可直接集成nodejs
用户快速画各种图,饼图、折线图、3D立体图、柱状图等
Highcharts-2.2.0图表制图
用javascript封装好的一些js文件,直接可以使用,生成的图表很专业,有柱状图,饼图
highchars的3D饼图必须要引入的外部js样式,需要通过外部js引进
本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D...
<highcharts> Web组件包装到,以使用创建大量图形/地图(样条图,饼图等)。演示版您可以观看! 在右上角有一个Tutorial图标。安装使用安装组件: $ npm install highcharts-chart --save 或 。用法在较旧的浏览器上...
经过一天半的努力,从官网下载的实例,然后更新几个js及顺序,最终实现了IE8可以显示饼图及其它图形。个别复杂图形可能会不好用,目前试到的就有一个3d的不好用,其它多数按照教程走都可以正常显示。
highcharts饼图字段过长超出解决,代码明了,操作简单
带例子,将原来单色变为渐变色,运行电脑时间,不超过2015年1月
主要介绍了Javascript highcharts 饼图显示数量和百分比实例代码的相关资料,这里附有实例代码,需要的朋友可以参考下
php饼图 jquery饼图 highcharts
highcharts 与 struts2 完美整合,解决部分新手对于操作highcharts的误区,本例子无需连接数据库,在strust2 Action中创建模拟数据,以json的方式返回到前台js,highcharts通过解析json,进而完成数据的装配,且可以...