Highcharts蜘蛛網標籤重疊（頂部和底部）

Question

我使用高圖創建了蜘蛛網圖，但是我在頂部和底部標籤中獲得重疊標籤。我嘗試包裝它們，並試圖錯開標籤，但我無法阻止它們重疊。

$(function() { 
$('#spiderchartFull').highcharts({ 
    chart: { 
     polar: true, 
     type: 'line', 
     marginLeft: 120, 
     marginRight: 120 
    }, 
    title: { 
     text: 'Liste des interdépendances a la biodiversité et aux services écologiques' 
    }, 
    subtitle: { 
     text: 'Détaillé' 
    }, 
    xAxis: { 
     categories: [ 
      'Production végétale', 
      'Production animale', 
      'Produits biotiques marins', 
      'Produits biotiques d\'eau douce', 
      'Aquaculture', 
      'Eau potable', 
      'Matières minérales', 
      'Energie renouvelable issue du vivant', 
      'Energie non renouvelable issue du vivant', 
      'Energie renouvelable abiotique', 
      'Dépollution', 
      'Assimilation des déchets', 
      'Régulation des flux gazeux', 
      'Régulation des flux hydriques', 
      'Régulation des phénomènes érosifs', 
      'Régulation de la qualité de l\'air', 
      'Régulation de la qualité de l\'eau', 
      'Régulation de la qualité des sols', 
      'Régulation du climat global', 
      'Régulation du climat local', 
      'Maintenance du cycle de vie et protection des habitats', 
      'Régulation des pathogènes et parasites', 
      'Conservation des stocks génétiques', 
      'Recherche scientifique', 
      'Education', 
      'Esthétiques et culturels', 
      'Religieux', 
      'Récréation', 
      'Volontariat'], 
     labels: { 
      style: { 
       fontSize: '13px', 
       fontFamily: 'Verdana, sans-serif', 
       width: 150, 

      } 
     }, 
     tickmarkPlacement: 'on', 
     lineWidth: 0, 
    }, 
    yAxis: { 
     gridLineInterpolation: 'polygon', 
     lineWidth: 0, 
     min: 0, 
     max: 5, 
     title: { 
      text: 'Rainfall (mm)' 
     } 
    }, 
    tooltip: { 
     headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 
     pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>', 
     footerFormat: '</table>', 
     shared: true, 
     useHTML: true 
    }, 
    plotOptions: { 
     column: { 
      pointPadding: 0.2, 
      borderWidth: 0 
     } 
    }, 
    series: [{ 
     name: 'Dépendances aux SE', 
     data: [1.0, 2.0, 3.6, 4.7, 5.0, 1.1, 2.75, 4.33, 4.43, 3.52, 1.0, 2.0, 3.6, 4.7, 5.0, 1.1, 2.75, 4.33, 4.43, 3.52, 1.0, 2.0, 3.6, 4.7, 5.0, 1.1, 2.75, 4.33, 4.43], 
     pointPlacement: 'on' 
    }, { 
     name: 'Transactions monétaires associées', 
     data: [2.0, 3.0, 2.6, 1.7, 1.0, 1.3, 2.235, 4.323, 4.43, 4.52, 2.0, 1.0, 3.6, 3.7, 5.0, 1.1, 2.75, 4.33, 4.43, 3.52, 1.0, 2.0, 3.6, 4.7, 5.0, 1.1, 2.75, 4.33, 4.43], 
     pointPlacement: 'on' 
    }], 

    legend: { 
     itemStyle: { 
      width: 100 
     }, 
    } 
}); 

}）;

在這裏你可以看到我創建的highchart：http://jsfiddle.net/Rfaav/4/

Answer 1

我不知道如何有用的是那種圖的，但是你可以設置tickInterval，例如：http://jsfiddle.net/Rfaav/5/

Answer 2

我也正面臨着同樣的疑難問題解決了它使用「useHTML」和我自己的一些JavaScript。 以下是代碼。

xAxis: { 
    categories: [], 
    tickmarkPlacement: 'on', 
    lineWidth: 0, 

    labels: { 
     useHTML: false, 
     style: { 
      width: '240px' 
     } 
       , 
     formatter: function() { 
      if ('Is an ideal holiday destination' === this.value) { 
       return '<span id="spn_itisideal"><span style="">' + this.value + '</span>'; 

      } 
      else if ('Is a modern and trendy place' === this.value) { 
       return '<span id="spn_isamodern"><span style="">' + this.value + '</tspan>'; 
      } 
      else if ('Is a popular destination' === this.value) 
      { return '<span id="spn_isapopular"><span style="">' + this.value + '</span>'; } 
      else if ('Has great infrastructure' === this.value) 
      { return '<span id="spn_hasgreatinfrastructure"><span style="">' + this.value + '</span>'; } 
      else { 
       return this.value; 
      } 
     } 
    } 
}, 

當設置useHTML爲true，則x軸標籤都呈現爲html.I挑選那些在格式化功能重疊的標籤和將它們包裝起來以與相應的ID的跨度。 我的圖表加載後，我使用JavaScript函數來調用這些跨度，並根據我的意願調整它們。

function alterWebChart() {//Adjust x-axis label span. 
    $('#spn_itisideal').parent().css('left', '268.273px'); 
    $('#spn_isamodern').parent().css('left', '479.727px'); 
    $('#spn_isapopular').parent().css('left', '260.526px'); 
    $('#spn_hasgreatinfrastructure').parent().css('left', '510.974px'); 
}