Teilen von HighCharts-Zeichnungsbeispielen für 2D-Donut-Diagrammeffekte-js-Tutorial-php.cn

Teilen von HighCharts-Zeichnungsbeispielen für 2D-Donut-Diagrammeffekte

小云云

Freigeben： 2018-01-23 09:02:26

Original

1672 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Wirkung des jQuery-Plug-Ins HighCharts zum Zeichnen eines 2D-Donut-Diagramms vorgestellt. Er analysiert die Implementierungsschritte und zugehörigen Betriebstechniken von jQuery mithilfe des HighCharts-Plug-Ins zum Zeichnen eines Donut-Diagramms in Form von Beispielen. Es enthält auch einen Demo-Quellcode, den Leser als Referenz herunterladen können. Sie können darauf verweisen, ich hoffe, es kann allen helfen.

Das Beispiel in diesem Artikel beschreibt den Effekt des Zeichnens eines 2D-Donut-Diagramms mit dem jQuery-Plug-in HighCharts. Teilen Sie es wie folgt mit allen:

1. Beispielcode:

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

Nach dem Login kopieren

2 >

Verwandte Empfehlungen:

Beispiel für HighCharts-Zeichnung eines 2D-Kreisdiagrammeffekts mit Legend teilen

Detaillierte Erklärung Wie um Daten dynamisch über PHP an Highcharts zu übertragen

Beispielcode für die Verwendung von Highcharts

Das obige ist der detaillierte Inhalt vonTeilen von HighCharts-Zeichnungsbeispielen für 2D-Donut-Diagrammeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!