2016-12-12 108 views
0

現在、グラフのラベルはデフォルトの位置に置かれていますが、ラベルのテキストはかなり長く、グラフから突き出ています。amchartsカスタマイズされたラベルの位置

可能であれば、グラフからラベルがはみ出ないように配置します。

Pic of Current situation & Ideal graph

または上記が不可能な場合は、私が目に見えるラベルを修正したいです。これは可能ですか? 今、グラフの幅を小さくすると、「ベスト」ラベルが失われたり隠されたりします。 「あまりにも多くの」ラベルは、幅が大幅に縮小されると失われます。

私はstackoverflowとamchartsのウェブサイト全体を検索していますが、私は良い解決策を見つけることができません。 いずれかの問題を解決する方法はありますか?

// tried these but doesnt work for what I want to do 
va.labelOffset = -5; 
va.position = "bottom"; 
va.inside = false; 

full code in JSfiddle

答えて

0

リサイズのラベルを隠してからチャートを保つためには、あなたがvalueAxis' autoGridCountを無効にし、ダニの数にgridCountを設定する必要がありますあなたが見たいと思ってマークします。また、labelFrequency設定を削除する必要があります。ラベルの位置については

va.autoGridCount = false; 
va.gridCount = 3; 
//va.labelFrequency = 5; 

、あなたはボックスの外に回転し、垂直オフセットにlimtedされています。回避策として、例えば、drawnイベントを通じて直接SVGノードを変更することで、ラベルを配置することができます

// prior to chart.write 
chart.addListener("drawn", function(e) { 
    var textNodes = e.chart.valueAxes[0].labelsSet.node.childNodes; 
    var transform; 

    //Position "too little" 
    transform = parseTransform(textNodes[0].getAttribute('transform')); 
    transform.translate[0] = parseFloat(transform.translate[0]) + 25; 
    textNodes[0].setAttribute('transform', serializeTransform(transform)); 
    // Position "too much" 
    transform = parseTransform(textNodes[2].getAttribute('transform')); 
    transform.translate[0] = parseFloat(transform.translate[0]) - 25; 
    textNodes[2].setAttribute('transform', serializeTransform(transform)); 

}); 

// ... 

// from http://stackoverflow.com/questions/17824145/parse-svg-transform-attribute-with-javascript 
function parseTransform(a) { 
    var b = {}; 
    for (var i in a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g)) { 
    var c = a[i].match(/[\w\.\-]+/g); 
    b[c.shift()] = c; 
    } 
    return b; 
} 

//serialize transform object back to an attribute string 
function serializeTransform(transformObj) { 
    var transformStrings = []; 
    for (var attr in transformObj) { 
    transformStrings.push(attr + '(' + transformObj[attr].join(',') + ')'); 
    } 
    return transformStrings.join(','); 
} 

Updated fiddle

+0

これは完全に働きました。どうもありがとうございます! – yuka

関連する問題