3

我使用 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/

4

2 回答 2

2

我不确定这种图表有多有用，但您可以设置tickInterval，例如：http: //jsfiddle.net/Rfaav/5/

于 2013-05-27T12:39:26.000 回答
0

我也面临同样的问题。我使用'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。我选择那些在格式化程序函数中重叠的标签，并用具有各自 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');
}
于 2013-05-26T15:21:48.803 回答