Home > Article > Web Front-end > jQuery plug-in HighCharts drawing 2D pie chart effect example sharing

jQuery plug-in HighCharts drawing 2D pie chart effect example sharing

小云云Original: 2018-01-22 10:46:152118browse

This article mainly introduces the effect of jQuery plug-in HighCharts to draw 2D pie charts. It analyzes the operation steps and related implementation techniques of using jQuery plug-in HighCharts to draw pie charts in the form of a complete example. It also comes with demo source code for readers to download for reference. Friends who need it You can refer to it, I hope it can help everyone.

The example in this article describes the effect of drawing a 2D pie chart with the jQuery plug-in HighCharts. Share it with everyone for your reference, the details are as follows:

1. Example code:

<!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. The running effect diagram is as follows:

Have you learned it? Hurry up and try it out.

echarts pie chart sector adds click event - Fannn

WeChat applet drawing pie chart implementation

php Generate pie chart three-dimensional pie chart_PHP tutorial

The above is the detailed content of jQuery plug-in HighCharts drawing 2D pie chart effect example sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Completely master $location in AngularJSNext article：Completely master $location in AngularJS

See more

jQuery plug-in HighCharts drawing 2D pie chart effect example sharing

Related articles