2

カスタム フォントHighchartsを凡例項目に適用するときに、凡例項目のスタイル設定に問題があります。実際、アイテムは互いに非常に近く、機能していません。itemMarginBottomitemMarginTop

ここに私のHighchartsコードの一部があります:

legend: {
    enabled: true,
    y: 20,
    align: 'right',
    verticalAlign: 'top',
    margin: 30,
    width: 200,
    borderWidth: 0,
    itemMarginTop: 15,
    itemMarginBottom: 15,
    itemStyle: {
            color: '#000',
            fontFamily: 'MuseoS500'
    }
},

そして、ここに伝説のスクリーンショットがあります:

ここに画像の説明を入力

私の醜い解決策：

私はそれを以下のように解決しましたが、悲しいことにハードコーディングしました:

// it is for the text's in the legend, I'll start from 0 and will
// increase by 10, so it's adding 10 pixels extra space to the next one
var z = 0;    

// this is for tiny-lines near the texts in legend, they starts from 14
// and increasing by 14 also ...
var p = 14;

// loop through <text> tags, which are texts in the lgened
$('.highcharts-legend > text').each( function (i) {

    // they have 'x' and 'y' attribute, I need to work on 'y' obviously
    y = parseInt($(this).attr('y'));

    // increasing 'y' value ...
    $(this).attr('y', y + z);

    // next element is <path>, the colorful lines ...
    $(this).next().attr('transform', 'translate(30,' + p + ')');

    // increasing the values, for the next item in the loop ...
    z = z + 10;
    p = p + 10 + 14;

});

ばかげていることはわかっていますが、他の方法では解決できず、どうにかしてそれらを機能させる必要がありました。私もあなたの考えを聞いてうれしいです... :)

パッチ後の新しい伝説:

ここに画像の説明を入力

4

1 に答える 1

5

Highchartのドキュメントには、と呼ばれるプロパティがあると書かれていますがlineHeight、Highcharts 2.1 以降は非推奨です。

公式のHighcharts フォーラムの投稿でも同じことが確認されています。したがって、必要に応じてソースコードをハックして高さを変更するか、チャートのレンダリング後にjavascriptでアイテムの高さを修正してみてください。

また、itemStyle凡例項目に CSS を設定できるという属性があります。

例えばpaddingBottom: '10px'

例を確認してください：

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/legend/lineheight/

于 2012-10-08T16:40:26.007 に答える