Highcharts Spider Web Label overlap (Top and Bottom)

Question

Я создал диаграмму Spider Web с помощью графических карт, но я получаю перекрывающиеся ярлыки в самой верхней и нижней части ярлыков. Я попробовал обернуть их, а также попытался ошеломлять ярлыки, но я не смог помешать им накладываться друг на друга.

$(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

Я тоже сталкиваются с той же problem.I решить ее с помощью «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 истинно, то х-метки оси отображаются в виде html.I выбрать те перекрывающиеся метки в функции форматирования и оберните их с пролетом с соответствующим идентификатором. после загрузки моей диаграммы. Я использую функцию 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'); 
}