Diagramme circulaire monochrome Highcharts

Diagramme circulaire Highcharts

L'exemple suivant montre un diagramme circulaire monochrome.

Dans les chapitres précédents, nous avons appris la syntaxe de configuration de base de Highcharts. Voyons maintenant d'autres configurations.

Configuration

configuration des couleurs

Utilisez la propriété Highcharts.getOptions().plotOptions.pie.colors pour configurer les couleurs de chaque diagramme circulaire.

// 设置单色并为所有饼设置默认主题
Highcharts.getOptions().plotOptions.pie.colors = (function () {
   var colors = [];
   var base = Highcharts.getOptions().colors[0];
   var i;

   for (i = 0; i < 10; i += 1) {
      // 以一暗色开始并以亮色结束
      colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
   }
   return colors;
}());

Exemple

Nom du fichier : highcharts_pie_monochrome.htm

<html>
<head>
<meta charset="UTF-8" />
<title>Highcharts 教程 | Example(example.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {
       plotBackgroundColor: null,
       plotBorderWidth: null,
       plotShadow: false
   };
   var title = {
      text: 'Browser market shares at a specific website, 2014'   
   };      
   var tooltip = {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
   };
   var plotOptions = {
      pie: {
         allowPointSelect: true,
         cursor: 'pointer',
         dataLabels: {
            enabled: true,
            format: '<b>{point.name}%</b>: {point.percentage:.1f} %',
            style: {
               color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            }
         }
      }
   };
   var series= [{
      type: 'pie',
      name: 'Browser share',
      data: [
         ['Firefox',   45.0],
         ['IE',       26.8],
         {
            name: 'Chrome',
            y: 12.8,
            sliced: true,
            selected: true
         },
         ['Safari',    8.5],
         ['Opera',     6.2],
         ['Others',   0.7]
      ]
   }];     
   // Make monochrome colors and set them as default for all pies
   Highcharts.getOptions().plotOptions.pie.colors = (function () {
      var colors = [];
      var base = Highcharts.getOptions().colors[0];
      var i;

      for (i = 0; i < 10; i += 1) {
         // Start out with a darkened base color (negative brighten), and end
         // up with a much brighter color
         colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
      }
      return colors;
   }());
      
   var json = {};   
   json.chart = chart; 
   json.title = title;     
   json.tooltip = tooltip;  
   json.series = series;
   json.plotOptions = plotOptions;
   $('#container').highcharts(json);  
});
</script>
</body>
</html>

Essayez-le vous-même »

Le résultat de sortie de l'exemple ci-dessus est :

Diagramme circulaire Highcharts