Maison > Article > interface Web > Plug-in jQuery HighCharts dessinant un exemple d'effet de diagramme circulaire 2D partageant

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

小云云original: 2018-01-22 10:46:152112parcourir

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>

2. comme suit :

L'avez-vous appris ? Dépêchez-vous et essayez-le.

Ajouter un événement de clic au secteur du diagramme circulaire echarts - Fannn

Implémentation du diagramme circulaire du dessin de l'applet WeChat

php génère un diagramme circulaire en trois dimensions_Tutoriel PHP

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Maîtriser complètement $location dans AngularJSArticle suivant：Maîtriser complètement $location dans AngularJS

Articles Liés

Voir plus