suchen

Heim  >  Artikel  >  Web-Frontend  >  HighCharts zeichnet ein Beispiel für einen 2D-Kreisdiagrammeffekt, das mit Legend geteilt wird

HighCharts zeichnet ein Beispiel für einen 2D-Kreisdiagrammeffekt, das mit Legend geteilt wird

小云云
小云云Original
2018-01-22 16:54:061725Durchsuche

In diesem Artikel wird hauptsächlich das jQuery-Plug-in HighCharts zum Zeichnen eines 2D-Kreisdiagramms mit Legend vorgestellt. Er analysiert die Implementierungstechniken von jQuery zum Zeichnen eines Kreisdiagramms mit detaillierter Anzeige in Form von Beispielen Demo-Quellcode, den Leser als Referenz herunterladen können. Freunde in Not können sich darauf beziehen. Ich hoffe, dass er allen helfen kann.

Das Beispiel in diesem Artikel beschreibt, wie das jQuery-Plugin HighCharts mit Legend einen 2D-Kreisdiagrammeffekt zeichnet. Teilen Sie es wie folgt mit allen:

1. Beispielcode: 


<!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>

2 >

Verwandte Empfehlungen:


jQuery-Plug-in HighCharts zum Zeichnen von 2D-Kreisdiagramm-Effektbeispielen zum Teilen

Highcharts Verwendung Beispielcode

PHP+MySQL+Highcharts zur Implementierung von Kreisdiagramm_PHP-Tutorial

Das obige ist der detaillierte Inhalt vonHighCharts zeichnet ein Beispiel für einen 2D-Kreisdiagrammeffekt, das mit Legend geteilt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql jquery
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：Teilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiertNächster Artikel：Teilen Sie Beispiele dafür, wie jQuery die positiven und negativen Flip-Effekte von Pokerkarten realisiert

In Verbindung stehende Artikel

Mehr sehen