3

ハイチャートを使用してスパイダー ウェブ チャートを作成しましたが、一番上のラベルと一番下のラベルで重複するラベルが表示されます。ラッピングしたり、ラベルをずらしたりしてみましたが、重ならないようにできませんでした。

$(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 に答える