文字在Amcharts中重叠的情况下的偏移量引导标签

问题描述

我想将指南包含到我的图表中，我发现了非常具有描述性的示例.但是，我在标签文本的位置上很挣扎，特别是在辅助线非常靠近以至于标签重叠的情况下.

I would like to include guides into my amcharts graphs and I found very descriptive examples. However I'm struggling with positioning of label text, especially in case when guides are so close that labels overlap.

这里是示例代码 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:

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代码?

Any idea how to push label text below the guide for guides in case that labels are overlapping. Perhaps with CSS code for class name amcharts-guide-[id]?

推荐答案

无法通过指南属性来完成此操作，但是您对css类名称有一定的要求.将 addClassNames 设置为true，提供您的指南ID，然后添加股票面板中的 drawn 事件监听器，用于调整所需的指南( s)直接通过在.amcharts-guide-[id] tspan选择器上调用querySelector并调整y属性:

There isn't a way to do this through the guide properties properties, but you have the right hunch with the css class name. Set addClassNames to true, give your guides IDs and then add a drawn event listener in your stock panel that adjusts the desired guide(s) directly by calling querySelector on the .amcharts-guide-[id] tspan selector and adjusting the y attribute:

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

更新了小提琴

这篇关于文字在Amcharts中重叠的情况下的偏移量引导标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！