ホームページ > 記事 > ウェブフロントエンド > jQuery プラグイン HighCharts 描画 2D 円グラフ効果の例の共有

jQuery プラグイン HighCharts 描画 2D 円グラフ効果の例の共有

小云云オリジナル: 2018-01-22 10:46:152112ブラウズ

この記事では、主に 2D 円グラフを描画するための jQuery プラグイン HighCharts の効果を紹介し、HighCharts プラグインを使用して円グラフを描画するための jQuery の操作手順と関連する実装テクニックを完全な例の形で分析します。また、読者が参照用にダウンロードできるデモソースコードも付属しています。次に、これがすべての人に役立つことを願っています。

この記事の例では、2D 円グラフ効果を描画する jQuery プラグイン HighCharts について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

1. コードの例:

<!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. 操作効果図は次のとおりです:

急いで試してみてください。

echarts 円グラフセクター追加クリックイベント - Fannn

WeChat ミニプログラム描画円グラフの実装

php 円グラフの生成三次元円グラフ_PHP チュートリアル

以上がjQuery プラグイン HighCharts 描画 2D 円グラフ効果の例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：AngularJS で $location を完全にマスターする次の記事：AngularJS で $location を完全にマスターする

続きを見る