0

以下のコードのフィドルリンクがあります：

$(function () {
$('#container').highcharts({
    chart: {
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    plotOptions: {
        series: {
            dataLabels: {
                align: 'left',
                enabled: true,
                rotation: 270,
                x: 2,
                y: -10
            }
        }
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
    }]
  });
});

dataLabels を上下に表示したい (たとえば、1 月/3 月/5 月のポイントをラインの上に表示し、ポイント (2 月/4 月/6 月) をラインの下に表示)。これを達成する方法を知っている人はいますか?

ありがとう。

4

1 に答える 1

5

これを実現する 1 つの方法は、個々のポイントの x、y 位置を、データ オブジェクトを介して渡すことによってオーバーライドすることです。

series: [{
        data: [
            { y: 29.9, dataLabels: { x: 0, y: 30 } }, 
            { y: 71.5, dataLabels: { x: 0, y: -10 } }, 
            { y: 106.4, dataLabels: { x: 0, y: 40 } }, 
            { y: 129.2, dataLabels: { x: 0, y: -10 } }, 
            { y: 144.0, dataLabels: { x: 0, y: 30 } }, 
            { y: 176.0, dataLabels: { x: 0, y: -10 } }, 
            { y: 135.6, dataLabels: { x: 0, y: 30 } }, 
            { y: 148.5, dataLabels: { x: 0, y: -10 } }, 
            { y: 216.4, dataLabels: { x: 0, y: 40 } }, 
            { y: 194.1, dataLabels: { x: 0, y: -10 } }, 
            { y: 95.6, dataLabels: { x: 0, y: 30 } },
            { y: 54.4, dataLabels: { x: 0, y: -10 } }
        ]        
    }]

フィドルの例

上記の簡単な解決策は静的データに対してはうまく機能しますが、大量のデータがある場合は面倒です。また、データ ラベルを動的に変更することはできません。したがって、より一般的な別のソリューションを次に示します。グラフがレンダリングされた後にデータ ラベルを設定します。

$.each(chartObj.series[0].data, function(i, point) {
    console.log('point: ', point);
    if(i % 2 == 0) {
        point.dataLabel.attr({y: point.dataLabel.y - 15});
    } else {
        point.dataLabel.attr({y: point.dataLabel.y + 35});
    }
});

別のフィドルの例

于 2013-10-04T21:12:25.880 に答える