html js highcharts绘制圆饼图表

最新推荐文章于 2021-06-28 12:14:04 发布

原创最新推荐文章于 2021-06-28 12:14:04 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

JAVA开发专栏收录该内容

83 篇文章

订阅专栏

本文介绍如何利用jQuery和Highcharts库创建一个动态更新的饼状图，展示浏览器市场份额变化情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery实现饼状图效果 - 站长素材</title>
    <script type="text/javascript" src="jquery-1.4.2.min.js" ></script>
    <script type="text/javascript" src="highcharts.js" ></script>

    </head>
    <body>

        <div id="content">

    <br><br><br>
    
    <div id="pie_chart" class="chart_combo"></div>

    <script type="text/javascript">
        var chart;
     $(function () {
          var totalMoney=999
    <span style="white-space:pre">    </span>var zccw=178
    <span style="white-space:pre">    </span>var sycw=821
        $(document).ready(function() {
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'pie_chart',
                    plotBackgroundColor: 'white',//背景颜色
                    plotBorderWidth: 0,
                    plotShadow: false
                },
                title: {
                    text: '总车位:'+totalMoney +' 剩余车位:'+ sycw ,
                    verticalAlign:'bottom',
                    y:-60
                },
               tooltip: {//鼠标移动到每个饼图显示的内容
                    pointFormat: '{point.name}: <b>{point.percentage}%</b>',
                    percentageDecimals: 1,
                    formatter: function() {
                        return this.point.name+':'+totalMoney*this.point.percentage/100;
                    }
                },
                plotOptions: {
                    pie: {
                        size:'60%',
                        borderWidth: 0,
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                        enabled: true,
                        color: '#000',
                        distance: -50,//通过设置这个属性，将每个小饼图的显示名称和每个饼图重叠
                        style: {
                            fontSize: '10px',
                            lineHeight: '10px'
                        },
                        formatter: function(index) {
                                return '<span style="color:#00008B;font-weight:bold">' + this.point.name + '</span>';
                           }
                      },
                     padding:20
                    }
                },
                series: [{//设置每小个饼图的颜色、名称、百分比
                    type: 'pie',
                    name: null,
                    data: [
                        {name:'在场车辆',color:'#3DA9FF',y:zccw},
                        {name:'剩余车位',color:'#008FE0',y:sycw},

                    ]
                }]
            });
        });

    });


    </script>

    </div>
     </body>
    </html>

    <%@ 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>