オフセットは、アンチャートでテキストが重なった場合のラベルをガイドします

Question

私はamchartsグラフにガイドを含めたいと思います。しかし、特にラベルが重なり合うようにガイドが非常に近い場合に、ラベルテキストの位置付けに苦労しています。ここで

のコード例では、https://jsfiddle.net/Tripy/1wwygcy7/2/

HTMLです：

<script src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
<script src="https://www.amcharts.com/lib/3/serial.js"></script> 
<script src="https://www.amcharts.com/lib/3/amstock.js"></script> 
<div id="chartdiv" style="width: 100%; height: 500px;"></div> 

Javascriptを：

var chartData = weekendGuides = []; 
generateChartData(); 

function generateChartData() { 
    var firstDate = new Date(); 
    firstDate.setDate(firstDate.getDate() - 200); 
    firstDate.setHours(0, 0, 0, 0); 
    for (var i = 0; i < 200; i++) { 
     var newDate = new Date(firstDate); 
     newDate.setDate(newDate.getDate() + i); 
     var a1 = Math.round(Math.random() * (40 + i)) + 100 + i; 
     var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2; 
     chartData.push({ 
      "date": newDate, 
      "value": a1, 
      "volume": b1 
     }); 

     // add weekend guide 
     if (6 == newDate.getDay()) { 
      var toDate = new Date(newDate); 
      toDate.setDate(newDate.getDate() + 2); 
      weekendGuides.push({ 
       "date": newDate, 
       "toDate": toDate, 
       "lineAlpha": 0, 
       "fillAlpha": 0.05, 
       "fillColor": "#000", 
       "expand": true 
      }); 
     } 
    } 
} 

var chart = AmCharts.makeChart("chartdiv", { 
    "type": "stock", 
    "dataSets": [ { 
     "title": "first data set", 
     "fieldMappings": [ { 
      "fromField": "value", 
      "toField": "value" 
     }, { 
      "fromField": "volume", 
      "toField": "volume" 
     } ], 
     "dataProvider": chartData, 
     "categoryField": "date" 
    } ], 
    "panels": [ { 
     "showCategoryAxis": false, 
     "title": "Value", 
     "percentHeight": 70, 
     "stockGraphs": [ { 
      "id": "g1", 
      "valueField": "value", 
      "comparable": true, 
      "compareField": "value", 
      "balloonText": "[[title]]:<b>[[value]]</b>", 
      "compareGraphBalloonText": "[[title]]:<b>[[value]]</b>" 
     } ], 
     "stockLegend": { 
      "periodValueTextComparing": "[[percents.value.close]]%", 
      "periodValueTextRegular": "[[value.close]]" 
     }, 
     "categoryAxis": { 
      "guides": weekendGuides 
     }, 
     "valueAxes": [ { 
      "guides": [ { 
       "value": 325, 
       "lineAlpha": 0.8, 
       "lineColor": "#0c0", 
       "label": "Guide #1", 
       "position": "right" 
      }, { 
       "value": 322, 
       "lineAlpha": 0.8, 
       "lineColor": "#0c0", 
       "label": "Guide #2", 
       "position": "right" 
      }] 
     } ] 
    } ], 
    "chartScrollbarSettings": { 
     "graph": "g1" 
    }, 
    "chartCursorSettings": { 
     "valueBalloonsEnabled": true, 
     "fullWidth": true, 
     "cursorAlpha": 0.1 
    }, 
    "periodSelector": { 
     "position": "bottom", 
     "periods": [ { 
      "period": "MM", 
      "selected": true, 
      "count": 1, 
      "label": "1 month" 
     }, { 
      "period": "YYYY", 
      "count": 1, 
      "label": "1 year" 
     }, { 
      "period": "YTD", 
      "label": "YTD" 
     }, { 
      "period": "MAX", 
      "label": "MAX" 
     } ] 
    } 
}); 

ラベルが重複している場合にはガイドの案内の下のラベルのテキストをプッシュする方法任意のアイデア。おそらく、クラス名amcharts-guide- [id]のCSSコードですか？

Answer 1

ガイドプロパティのプロパティでこれを行う方法はありませんが、あなたはcssクラス名を使用して適切な感覚を持っています。

AmCharts.makeChart("chartdiv", { 
    "addClassNames": true, 
    // ... 
    "stockPanels": [{ 
    "valueAxes": [{ 
     "guides": [{ 
     "id": "guide-1", 
     // .. 
     }, { 
     "id": "guide-2", 
     // .. 
     }] 
    }], 
    "listeners": [{ 
     "event": "drawn", 
     "method": function() { 
     var guide2Text = document.querySelector('.amcharts-guide-guide-2 tspan'); 
     if (guide2Text) { 
      guide2Text.setAttribute('y', 20); 
     } 
     } 
    }]  
    }], 
    // .. 
}); 

Updated fiddle：直接のy属性を.amcharts-guide-[id] tspanセレクタにquerySelectorを呼び出し、調整することによって、あなたのガイドにIDを与える、trueにaddClassNamesを設定し、目的のガイド（複数可）を調整し、あなたの株式のパネルでdrawnイベントリスナーを追加