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'); 
}