HighCharts 그리기 2D 도넛 차트 효과 예시 공유

小云云
풀어 주다: 2018-01-23 09:02:26
원래의
1631명이 탐색했습니다.

본 글에서는 jQuery 플러그인 HighCharts를 사용하여 2D 도넛 차트를 그리는 효과를 주로 소개하며, HighCharts 플러그인을 사용하여 도넛 차트를 그리는 jQuery의 구현 단계와 관련 운용 기술도 예시 형태로 설명합니다. 독자들이 참고할 수 있도록 데모 소스 코드가 함께 제공됩니다. 도움이 필요한 친구들이 이를 참조할 수 있기를 바랍니다.

이 기사의 예에서는 jQuery 플러그인 HighCharts를 사용하여 2D 도넛 차트를 그리는 효과를 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HighCharts 2D圆环图</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript">
  $(function(){
   var colors = Highcharts.getOptions().colors,
   categories = [&#39;花&#39;, &#39;树&#39;, &#39;鱼&#39;, &#39;鸟&#39;, &#39;鲸&#39;],
   name = &#39;Browser brands&#39;,
   data = [{
     y: 55.11,
     color: colors[0],
     drilldown: {
      name: &#39;花的种类&#39;,
      categories: [&#39;梅花&#39;, &#39;桃花&#39;, &#39;梨花&#39;, &#39;樱花&#39;],
      data: [13.6, 7.35, 33.06, 2.81],
      color: colors[0]
     }
    }, {
     y: 21.63,
     color: colors[1],
     drilldown: {
      name: &#39;树的种类&#39;,
      categories: [&#39;樟树&#39;, &#39;桉树&#39;, &#39;茶树&#39;, &#39;桃树&#39;, &#39;梨树&#39;],
      data: [15.20, 3.83, 18.58, 13.12, 45.43],
      color: colors[1]
     }
    }, {
     y: 11.94,
     color: colors[2],
     drilldown: {
      name: &#39;鱼的种类&#39;,
      categories: [&#39;鲫鱼&#39;, &#39;鲢鱼&#39;, &#39;草鱼&#39;, &#39;青鱼&#39;, &#39;鲦鱼&#39;,&#39;鳙鱼&#39;, &#39;鲥鱼&#39;],
      data: [41.12, 10.19, 11.12, 14.36, 21.32, 9.91, 17.50],
      color: colors[2]
     }
    }, {
     y: 7.15,
     color: colors[3],
     drilldown: {
      name: &#39;鸟的种类&#39;,
      categories: [&#39;松鸡&#39;, &#39;卷尾&#39;, &#39;鹪鹩&#39;, &#39;岩鹨&#39;, &#39;山鹑&#39;,&#39;画眉&#39;, &#39;金鸡&#39;],
      data: [14.55, 19.42, 16.23, 16.21, 18.20, 23.19, 10.14],
      color: colors[3]
     }
    }, {
     y: 2.14,
     color: colors[4],
     drilldown: {
      name: &#39;鲸的种类&#39;,
      categories: [&#39;须鲸&#39;, &#39;蓝鲸&#39;, &#39;虎鲸&#39;],
      data: [ 24.12, 18.37, 32.65],
      color: colors[4]
     }
    }];
  // 构建物种数据
  var speciesData = [];
  var speData = [];
  for (var i = 0; i < data.length; i++) {
   // 添加物种数据
   speciesData.push({
    name: categories[i],
    y: data[i].y,
    color: data[i].color
   });
   for (var j = 0; j < data[i].drilldown.data.length; j++) {
    var brightness = 0.4 - (j / data[i].drilldown.data.length) / 5 ;
    speData.push({
     name: data[i].drilldown.categories[j],
     y: data[i].drilldown.data[j],
     color: Highcharts.Color(data[i].color).brighten(brightness).get()
    });
   }
  }
  // 创建圆环图
  $(&#39;#donutChart&#39;).highcharts({
   chart: {
    type: &#39;pie&#39;
   },
   title: {
    text: &#39;物种数量及其比例&#39;
   },
   yAxis: {
    title: {
     text: &#39;比例&#39;
    }
   },
   plotOptions: {
    pie: {
     shadow: true,
     center: [&#39;50%&#39;, &#39;50%&#39;]
    }
   },
   tooltip: {
   valueSuffix: &#39;%&#39;
   },
   series: [{
    name: &#39;物种&#39;,
    data: speciesData,
    size: &#39;70%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 5 ? this.point.name : null;
     },
     color: &#39;white&#39;,
     distance: -30
    }
   }, {
    name: &#39;数量&#39;,
    data: speData,
    size: &#39;80%&#39;,
    innerSize: &#39;80%&#39;,
    dataLabels: {
     formatter: function() {
      return this.y > 1 ? &#39;<b>&#39;+ this.point.name +&#39;:</b> &#39;+ this.y +&#39;%&#39; : null;
     }
    }
   }]
  });
  });
</script>
</head>
<body>
 <p id="donutChart" style="width: 1250px; height: 550px; margin: 0 auto"></p>
</body>
</html>
로그인 후 복사

2. 작업 렌더링:

HighCharts는 범례 효과 예시로 2D 원형 차트를 그립니다. 공유


php를 통해 하이차트로 데이터를 동적으로 전송하는 방법에 대한 자세한 설명

하이차트 사용 예시 코드

위 내용은 HighCharts 그리기 2D 도넛 차트 효과 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿