Highcharts蜘蛛网标签重叠(顶部和底部) [英] Highcharts Spider Web Label overlap (Top and Bottom)

问题描述

我使用高图创建了一个蜘蛛网图表，但是在顶部和底部的标签中都出现了重叠的标签.我尝试包装它们，还尝试使标签交错，但是我无法防止它们重叠.

I created an Spider Web chart using highcharts, but I'm getting overlapping labels in the top most and lower most labels. I tried wrapping them and also tried staggering the labels, but I wasn't able to prevent them from overlapping.

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

Here you can see the highchart I created: http://jsfiddle.net/Rfaav/4/

推荐答案

我不确定这种图形是否有用，但是您可以设置tickInterval，例如:

I'm not sure how useful is that kind of graph, but you can set tickInterval, for example: http://jsfiddle.net/Rfaav/5/

这篇关于Highcharts蜘蛛网标签重叠(顶部和底部)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！