highcharts 高级应用—动态饼图的实现

最新推荐文章于 2024-05-10 14:40:50 发布

Jlins

最新推荐文章于 2024-05-10 14:40:50 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： java教程文章标签： function safari firefox opera events null

本文链接：https://blog.youkuaiyun.com/dyllove98/article/details/7720034

java教程专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一个使用Highcharts库实现实时更新的饼图示例。通过每隔两秒自动更新浏览器市场份额的数据来展示动态图表的效果。

如果你已经看了前面的关于曲线和柱状图的实现，饼图你看看效果和代码就行了！

动态柱状图实现

动态曲线实现

效果如下：

直接运行该JSP，你会看到效果，代码如下：

    Java代码  
     
    
  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<html>  
    <head>  
        <title>Highcharts Example</title>  
        <script language="javascript" type="text/javascript" src="jquery.min.js"></script>  
        <script language="javascript" type="text/javascript" src="highcharts.js"></script>  
        <script language="javascript" type="text/javascript" src="exporting.js"></script>  
<script type="text/javascript">  
var chart;  
$(document).ready(function() {  
    chart = new Highcharts.Chart({  
        chart: {  
            renderTo: 'container',  
            plotBackgroundColor: null,  
            plotBorderWidth: null,  
            plotShadow: false,  
            events: {  
              load: function() {  
                  // set up the updating of the chart each second  
                  var series = this.series[0];  
                  setInterval(function() {  
                      var data = [];  
                      data.push(['Firefox', Math.random()]);  
                      data.push(['IE', Math.random()]);  
                      data.push(['Safari', Math.random()]);  
                      data.push(['Opera', Math.random()]);  
                      data.push(['Others', Math.random()]);  
                      series.setData(data);  
                  }, 2000);  
              }  
           }  
        },  
        title: {  
            text: '<b>Java小强制作</b>'  
        },  
        tooltip: {  
            formatter: function() {  
                return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';  
            }  
        },  
        plotOptions: {  
            pie: {  
                allowPointSelect: true,  
                cursor: 'pointer',  
                dataLabels: {  
                    enabled: true,  
                    color: '#000000',  
                    connectorColor: '#000000',  
                    formatter: function() {  
                        return '<b>'+ this.point.name +'</b>: '+ this.percentage +' %';  
                    }  
                }  
            }  
        },  
        series: [{  
            type: 'pie',  
            name: 'Browser share',  
            data: [  
                ['Firefox',   45.8],  
                ['IE',       26.8],  
                ['Safari',    8.5],  
                ['Opera',     6.2],  
                ['Others',   12.7]  
            ]  
        }]  
    });  
});  
</script>  
    </head>  
    <body>  
<div id="container" style="width: 800px;height: 400px"></div>  
    </body>  
</html>  

废话不再多说！