文字在氨綸中重疊時的偏移量引導標簽

Question

我想將指南包括到我的圖表中，我發現了非常具有描述性的示例。 但是，我在標簽文本的位置上很掙扎，特別是在輔助線非常靠近以至於標簽重疊的情況下。

這是示例代碼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

無法通過guide屬性的屬性來執行此操作，但是您對css類的名稱很感興趣。 將addClassNames設置為true ，提供指南ID，然后在股票面板中添加drawn事件偵聽器，可通過在.amcharts-guide-[id] tspan選擇器上調用querySelector並調整y屬性來直接調整所需的指南：

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);
        }
      }
    }]    
  }],
  // ..
});

更新的小提琴