HighCharts dessine un exemple d'effet de diagramme circulaire 2D partagé avec Legend-js tutoriel-php.cn

HighCharts dessine un exemple d'effet de diagramme circulaire 2D partagé avec Legend

小云云

Libérer： 2018-01-22 16:54:06

original

1751 Les gens l'ont consulté

Cet article présente principalement le plug-in jQuery HighCharts pour dessiner un camembert 2D avec Legend. Il analyse les techniques d'implémentation de jQuery utilisant HighCharts pour dessiner un camembert avec affichage détaillé sous forme d'exemples. code source de démonstration que les lecteurs peuvent télécharger pour référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit comment le plug-in jQuery HighCharts dessine un effet de diagramme circulaire 2D avec Legend. 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带有Legend的饼图</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: &#39;#384778&#39;,
         plotBorderWidth: &#39;50px&#39;,
         plotShadow: true
       },
       title: {
         text: &#39;(jb51.net)2013年4月日收入明细&#39;
       },
       tooltip: {
        pointFormat: &#39;{series.name}: <b>{point.percentage:.1f}%</b>&#39;
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
           cursor: &#39;pointer&#39;,
           dataLabels: {
             enabled: true
           },
           showInLegend: true
         }
       },
       series: [{
         type: &#39;pie&#39;,
         name: &#39;日收入比率&#39;,
         data: [
           [&#39;20130401&#39;, 45.0],
           [&#39;20130402&#39;, 26.8],
           [&#39;20130403&#39;, 56.3],
           [&#39;20130404&#39;, 74.1],
           [&#39;20130405&#39;, 45.0],
           [&#39;20130406&#39;, 26.8],
           [&#39;20130407&#39;, 56.4],
           [&#39;20130408&#39;, 84.1],
           [&#39;20130409&#39;, 55.0],
           [&#39;20130410&#39;, 56.8],
           [&#39;20130411&#39;, 64.8],
           [&#39;20130412&#39;, 63.2],
           [&#39;20130413&#39;, 64.8],
           [&#39;20130414&#39;, 63.2],
           [&#39;20130415&#39;, 64.8],
           [&#39;20130416&#39;, 45.2],
           [&#39;20130417&#39;, 68.8],
           [&#39;20130418&#39;, 63.2],
           [&#39;20130419&#39;, 24.8],
           [&#39;20130420&#39;, 53.2],
           {
             name: &#39;20130421&#39;,
             y: 27.8,
             sliced: true,
             selected: true
           },
           [&#39;20130422&#39;, 63.2],
           [&#39;20130423&#39;, 64.8],
           [&#39;20130424&#39;, 63.2],
           [&#39;20130425&#39;, 64.8],
           [&#39;20130426&#39;, 45.2],
           [&#39;20130427&#39;, 68.8],
           [&#39;20130428&#39;, 63.2],
           [&#39;20130429&#39;, 24.8],
           [&#39;20130430&#39;, 98.8]
         ]
       }]
     });
   });
</script>
</head>
<body>
  <p id="pieChart" style="width: 1250px; height: 500px; margin: 0 auto"></p>
</body>
</html>

Copier après la connexion

2. >

Recommandations associées :