Highcharts 蜘蛛网标签重叠(顶部和底部)

Question

我使用 highcharts 创建了一个蜘蛛网图表，但我在最上面和最下面的标签中得到了重叠的标签。我试着把它们包起来，也试着把标签交错排列，但我无法阻止它们重叠。

$(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
        },
    }
});

});

在这里你可以看到我创建的图表:http://jsfiddle.net/Rfaav/4/

Answer 1

我不确定那种图表有多大用处，但你可以设置tickInterval，例如:http://jsfiddle.net/Rfaav/5/