jQuery-Plug-in HighCharts, Beispiel zum Teilen von 2D-Kreisdiagrammeffekten-js-Tutorial-php.cn

jQuery-Plug-in HighCharts, Beispiel zum Teilen von 2D-Kreisdiagrammeffekten

小云云

Freigeben： 2018-01-22 10:46:15

Original

2184 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Wirkung des jQuery-Plug-ins HighCharts zum Zeichnen von 2D-Kreisdiagrammen vorgestellt. Er analysiert die Arbeitsschritte und zugehörigen Implementierungstechniken der Verwendung des jQuery-Plug-ins HighCharts zum Zeichnen von Kreisdiagrammen Im Lieferumfang ist außerdem ein Demo-Quellcode enthalten, den die Leser als Referenz herunterladen können. Sie können darauf verweisen, ich hoffe, er kann allen helfen.

Das Beispiel in diesem Artikel beschreibt den Effekt des Zeichnens eines 2D-Kreisdiagramms mit dem jQuery-Plug-in HighCharts. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

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(){
   $(&#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>

Nach dem Login kopieren

2 wie folgt:

Hast du es gelernt? Beeilen Sie sich und probieren Sie es aus.

Klickereignis zum Echarts-Kreisdiagrammsektor hinzufügen – Fannn

Kreisdiagramm-Implementierung der WeChat-Applet-Zeichnung

PHP generiert Kreisdiagramm dreidimensionales Kreisdiagramm_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonjQuery-Plug-in HighCharts, Beispiel zum Teilen von 2D-Kreisdiagrammeffekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!