집 >웹 프론트엔드 >JS 튜토리얼 >HighCharts는 Legend와 공유하는 2D 원형 차트 효과 예시를 그립니다.

HighCharts는 Legend와 공유하는 2D 원형 차트 효과 예시를 그립니다.

小云云원래의: 2018-01-22 16:54:061766검색

이 글에서는 Legend로 2차원 원형 차트를 그리는 jQuery 플러그인 HighCharts를 주로 소개하며, HighCharts를 사용하여 jQuery의 구현 기술을 분석하여 예제 형태로 상세하게 표시되는 원형 차트도 함께 제공합니다. 독자들이 참조용으로 다운로드할 수 있는 코드입니다. 친구들이 참조할 수 있으므로 모두에게 도움이 되기를 바랍니다.

이 기사의 예에서는 Legend를 사용하여 2D 원형 차트 효과를 그리는 jQuery 플러그인 HighCharts를 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

<!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. 작업 렌더링:

jQuery 플러그인 HighCharts 드로잉 2D 원형 차트 효과 예

highcharts 사용 예제 코드

PHP+mysql+Highcharts를 공유하여 원형 차트 구현 튜토리얼_PHP 튜토리얼

위 내용은 HighCharts는 Legend와 공유하는 2D 원형 차트 효과 예시를 그립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

php mysql jquery

성명：

이전 기사：jQuery가 포커 카드의 긍정적이고 부정적인 뒤집기 효과를 어떻게 실현하는지에 대한 예를 공유합니다.다음 기사：jQuery가 포커 카드의 긍정적이고 부정적인 뒤집기 효과를 어떻게 실현하는지에 대한 예를 공유합니다.