Heim > Artikel > Web-Frontend > jQuery-Plug-in HighCharts, Beispiel zum Teilen von 2D-Kreisdiagrammeffekten

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

小云云Original: 2018-01-22 10:46:152070Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Beherrschen Sie $location in AngularJS vollständigNächster Artikel：Beherrschen Sie $location in AngularJS vollständig

In Verbindung stehende Artikel

Mehr sehen