`
liyonghui160com
  • 浏览: 775523 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

highcharts 饼图显示数量和百分比

阅读更多

<div class="piecleft" id="chart" style="height:350px; width: 350px;">
</div>
<script type="text/javascript" charset="utf-8">
var chart;
$(document).ready(function() {
   chart = new Highcharts.Chart({
      chart: {
         renderTo: 'chart'
      },
      title: {
         text: '版本分布分析'
      },
      plotArea: {
         shadow: null,
         borderWidth: null,
         backgroundColor: null
      },
      tooltip: {
         formatter: function() {
            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
                         Highcharts.numberFormat(this.y, 0, ',') +' 个)';
         }
      },
      plotOptions: {
         pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
               enabled: true,
               formatter: function() {
                  if (this.percentage > 4) return this.point.name;
               },
               color: 'white',
               style: {
                  font: '13px Trebuchet MS, Verdana, sans-serif'
               }
            }
         }
      },
      legend: {
         backgroundColor: '#FFFFFF',
         x: 0,
         y: -30
      },
      credits: {
          enabled: false
      },
       series: [{
         type: 'pie',
         name: 'Browser share',
         data: [
            ['1.1',3617],
            ['1.2.1',3436],
            ['1.0',416],
            ['1.3',2],
            ['1.2',1],
            ['新增对比',5000]
         ]
      }]
   });
});
</script>

分享到:
评论

相关推荐

    Javascript highcharts 饼图显示数量和百分比实例代码

    Javascript highcharts 饼图显示数量和百分比实例代码  最近公司项目需求有这样一个功能模块,highcharts 饼图显示数量和百分比 ,由于本人刚入门,看到这个需求不会写,于是就上网搜下相关资料,觉得一篇还不错...

    javascript下正则匹配百分比的代码

    您可能感兴趣的文章:js canvas仿支付宝芝麻信用分仪表盘ECharts仪表盘实例代码(附源码下载)jquery插件canvaspercent.js实现百分比圆饼效果Javascript highcharts 饼图显示数量和百分比实例代码JavaS

    Highcharts柱状图显示

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,包括柱状图、折线图、饼图等多种类型。在本案例中,我们聚焦于"Highcharts柱状图显示",特别是柱状图...

    饼图的demo

    1. **JavaScript库**:常见的JavaScript库如D3.js、ECharts、Highcharts等都提供了丰富的图表API,可以方便地创建动态饼图。通过监听数据变化,实时更新饼图的扇形角度。 2. **框架集成**:在React、Vue等前端框架中...

    highChartsjs

    在HighCharts.js中,你可以自定义饼图的各个部分的颜色、标签、数据标签、百分比显示等。饼图还可以进一步扩展为多环饼图或甜甜圈图,以呈现更丰富的信息层次。 柱状图则是另一种常用的数据可视化方式,适用于比较...

    highcharts实例+教程

    它支持各种图表类型,如柱状图、折线图、饼图、散点图等,广泛应用于数据分析、报告展示和信息传递等领域。这个"highcharts实例+教程"的压缩包包含了学习和使用Highcharts所需的重要资源。 首先,中文API帮助文档是...

    最新highcharts中文API.pdf

    Highcharts已经内置了多种颜色方案,当图形数量超过预设的颜色种类时,会自动循环使用这些颜色方案。 Credits选项提供了设置图表右下角的“***”版权信息的方式,包括是否启用、链接地址、位置以及样式等。 ...

    用js实现的数据饼图

    - **标签和工具提示**:显示每个部分的百分比或详细信息,可以用内切圆或外部标签。 - **分段交互**:点击或悬停时高亮相应部分,提供更多信息。 - **半饼图/环形图**:根据需求调整饼图的形状,如展示单个数据项...

    hichars饼图Demo演示

    这个文件可能包含了HTML、CSS和JavaScript代码,展示了如何初始化和配置Highcharts库,以创建部门人数百分比的饼图。开发者可以通过查看和学习这个文件,理解如何使用Highcharts库来实现类似的可视化效果。 总结来...

    highcharts报表控件 jquery报表插件

    Highcharts支持多种图表类型,包括标题中提到的"饼图"和"柱形图",以及其他如线图、面积图、散点图、热力图等。这些图表能够帮助用户直观地理解复杂的数据,使得数据分析和展示变得更加简单易懂。 饼图是一种以圆形...

    Highcharts 资源包

    Highcharts是一款强大的JavaScript图表库,用于在Web页面上创建各种数据可视化效果,如柱状图、折线图、饼图等。它具有丰富的定制选项,适用于各种业务需求和数据分析展示。资源包通常包含了Highcharts的基本文件和...

    网页图表Highcharts实践教程基础篇

    - **饼图**: 展示比例或百分比。 - **面积图**: 类似于折线图,但用颜色填充区域。 - **散点图**: 用于显示两个变量之间的关系。 - **组合图**: 将不同类型的图表结合在一起,便于对比分析。 #### 二、Highcharts的...

    highcharts图形类工具

    在Highcharts中,你可以设置各个扇区的颜色、标签、工具提示等属性,还可以通过`dataLabels`选项显示每个扇区的具体数值或百分比。此外,饼图支持分段显示,通过`slices`参数可以调整各部分的开口角度,增强视觉效果...

    Highcharts

    Highcharts是一款广泛应用于Web开发中的JavaScript图表库,它能够帮助开发者轻松创建各种动态、交互式的图表,如柱状图、折线图、饼图、散点图等,以直观地展示数据。Highcharts以其易用性、灵活性和高性能在业界...

    HighCharts图表

    HighCharts支持水平和垂直条形图,可以添加堆叠、分组、百分比堆叠等模式,使得数据对比更为直观。 3. **柱状图(Column Chart)** 柱状图与条形图类似,但更适合于显示垂直方向的数据。HighCharts的柱状图可以...

    Highcharts-2.1.4.zip

    在Highcharts中,你可以创建带有内径、分割、3D效果和动态旋转的饼图。每个扇区可以自定义颜色,并且支持数据标签,以直观地显示每个部分的数值或百分比。 3. **柱状图(Bar Charts)** 柱状图用于比较不同类别的...

    Highcharts-3.0.10 jquery报表

    4. **圆形报表**:饼图用于展示各部分占总体的比例,Highcharts提供了丰富的自定义选项,如分隔线、百分比标签、数据标签等,使饼图更具视觉吸引力和信息传达效果。 5. **柱状报表**:柱状图是另一种常用的数据可视...

    jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】

    每个饼图数据项都有其名字(如“星期一”)和对应的百分比(如13、23等)。 饼图的配置包括`center`(饼图的中心位置),`size`(饼图的半径),`showInLegend`(是否显示在图例中)和`dataLabels`(是否显示每个...

    Highcharts数据分析

    此外,Highcharts还支持响应式设计,能在不同设备和屏幕尺寸上保持良好的显示效果。 六、实际应用 Highcharts在商业报告、网站分析、学术研究、教育培训等多个领域有广泛应用。例如,它可以用于电商网站的商品销售...

Global site tag (gtag.js) - Google Analytics