Plug-in jQuery HighCharts dessinant un exemple d'effet de diagramme circulaire 2D partageant-js tutoriel-php.cn

Plug-in jQuery HighCharts dessinant un exemple d'effet de diagramme circulaire 2D partageant

小云云

Libérer： 2018-01-22 10:46:15

original

2081 Les gens l'ont consulté

Cet article présente principalement l'effet du plug-in jQuery HighCharts pour dessiner des diagrammes circulaires 2D. Il analyse les étapes de fonctionnement et les techniques de mise en œuvre associées à l'utilisation du plug-in jQuery HighCharts pour dessiner des diagrammes circulaires sous la forme d'un exemple complet. 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 diagramme circulaire 2D à l'aide du plug-in jQuery HighCharts. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

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(){
   $(&#39;#pieChart&#39;).highcharts({
     chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
      },
      title: {
        text: &#39;(jb51.net)2013年收入&#39;
      },
      tooltip: {
        pointFormat: &#39;{series.name}: <b>{point.percentage:.1f}%</b>&#39;
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: &#39;pointer&#39;,
          dataLabels: {
            enabled: true,
            color: &#39;#000000&#39;,
            connectorColor: &#39;#000000&#39;,
            format: &#39;<b>{point.name}</b>: {point.percentage:.1f} %&#39;
          }
        }
      },
      series: [{
        type: &#39;pie&#39;,
        name: &#39;月收入占比&#39;,
        data: [
          [&#39;一月&#39;, 8956],
          [&#39;二月&#39;, 5612],
          [&#39;三月&#39;, 4515],
          [&#39;四月&#39;, 9565],
          [&#39;五月&#39;, 2356],
          [&#39;六月&#39;, 4512],
          [&#39;七月&#39;, 5623],
          [&#39;八月&#39;, 1245],
          [&#39;九月&#39;, 4578],
          [&#39;十月&#39;, 8754],
          [&#39;十一月&#39;,6231],
          [&#39;十二月&#39;,5124]
        ]
      }]
    });
 });
</script>
</head>
<body>
  <p id="pieChart" style="width: 1200px; height: 500px; margin: 0 auto"></p>
</body>
</html>

Copier après la connexion

2. comme suit :