2016-12-26 9 views
2

極座標のカスタマイズに問題があります。 2つのネストされたサークルが好きです。期待される結果 -ハイチャート極座標2ネストされた円

enter image description here

$(function() { 
 
    var data = [{"name":"ビタミンA","y":3650,"color":"#9fe642","bg_color":"#F9D5B5","compare":"過剰"},{"name":"ビタミンB1","y":2783,"color":"#274ffb","bg_color":"#BBDEE8","compare":"不足"},{"name":"ビタミンB2","y":3616,"color":"#705ba4","bg_color":"#D8E4BE","compare":"適度"},{"name":"ビタミンC","y":3661,"color":"#a54593","bg_color":"#F9D5B5","compare":"過剰"},{"name":"カルシウム","y":2783,"color":"#d1d700","bg_color":"#BBDEE8","compare":"不足"},{"name":"鉄","y":3615,"color":"#06675e","bg_color":"#BBDEE8","compare":"不足"}]; 
 
    
 
    Highcharts.chart('polar-chart', { 
 
     chart: { 
 
      polar: true 
 
     }, 
 
     title: { 
 
      text: '' 
 
     }, 
 
     pane: { 
 
      startAngle: 0, 
 
      endAngle: 360, 
 
      background: [ 
 
       { 
 
        backgroundColor: { 
 
         linearGradient: {x1: 1, y1: 1, x2: 1, y2: 1}, 
 
         stops: [ 
 
          [0, '#FFF'], 
 
          [1, '#F9D5B5'] 
 
         ] 
 
        }, 
 
        borderWidth: 0, 
 
        outerRadius: '100%' 
 
       } 
 
      ] 
 
     }, 
 
     xAxis: { 
 
      tickInterval: 60, 
 
      min: 0, 
 
      max: 360, 
 
      labels: { 
 
       formatter: function() { 
 
        if (this.value == 0) { 
 
         return 'ビタミンA'; 
 
        } else if (this.value == 60) { 
 
         return 'ビタミンB1'; 
 
        } else if (this.value == 120) { 
 
         return 'ビタミンB2'; 
 
        } else if (this.value == 180) { 
 
         return 'ビタミンC'; 
 
        } else if (this.value == 240) { 
 
         return 'カルシウム'; 
 
        } else { 
 
         return '鉄'; 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     yAxis: { 
 
      min: 0 
 
     }, 
 
     plotOptions: { 
 
      series: { 
 
       pointStart: 0, 
 
       pointInterval: 60, 
 
       dataLabels: { 
 
        enabled: false, 
 
        format: '' 
 
       } 
 
      }, 
 
      column: { 
 
       pointPadding: 0, 
 
       groupPadding: 0 
 
      } 
 
     }, 
 
     series: [{ 
 
       type: 'line', 
 
       name: 'Nutrition', 
 
       data: data, 
 
       showInLegend: false, 
 
       zIndex: 3, 
 
      }, 
 
      
 
     { 
 
      type: 'column', 
 
      name: 'Line', 
 
      data: [{ 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }, { 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }, { 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }, { 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }, { 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }, { 
 
        color: "#BBDEE8", 
 
        y: 5000 
 
       }], 
 
      zIndex: 2, 
 
      pointPlacement: 'between', 
 
      showInLegend: false, 
 
     }, 
 
     { 
 
      type: 'column', 
 
      name: 'Line', 
 
      data: [{ 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }, { 
 
        color: "#D8E4BE", 
 
        y: 7000 
 
       }], 
 
      zIndex: 1, 
 
      pointPlacement: 'between', 
 
      showInLegend: false, 
 
     }, 
 
     ] 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/highcharts-more.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="polar-chart" style="min-width: 310px; max-width: 400px; height: 400px; margin: 0 auto"></div>

答えて

関連する問題