HighCharts dessinant un exemple d'effet de graphique en anneau 2D partageant-js tutoriel-php.cn

HighCharts dessinant un exemple d'effet de graphique en anneau 2D partageant

小云云

Libérer： 2018-01-23 09:02:26

original

1672 Les gens l'ont consulté

Cet article présente principalement l'effet du plug-in jQuery HighCharts pour dessiner un graphique en anneau 2D. Il analyse les étapes de mise en œuvre et les techniques de fonctionnement associées de jQuery à l'aide du plug-in HighCharts pour dessiner un graphique en anneau sous forme d'exemples. Il est également livré avec un code source de démonstration que les lecteurs peuvent télécharger pour référence. Amis qui en ont besoin. Vous pouvez vous y référer, j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit l'effet du dessin d'un graphique en anneau 2D avec le plug-in jQuery HighCharts. Partagez-le avec tout le monde pour votre référence, comme suit :

1. Exemple de code :

<!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>

Copier après la connexion

2. >

Recommandations associées :