как показать метку после разрыва двух точек в линейке amcharts версии 3 - PullRequest
Новая
       32

как показать метку после разрыва двух точек в линейке amcharts версии 3

0 голосов
/ 16 апреля 2020

Я использую amcharts версии 3 для рисования нескольких линейных графиков, как показано ниже, я показываю метку на каждой точке.

Код здесь: 

 var chart = AmCharts.makeChart("MultiAxisCovidChartDiv", {
    "type": "serial",
    "theme": "none",
    "dataProvider": [{"Deaths":7,"ForDate":"2020-03-24","NewDailyConfirmed":205,"NewDailyRecovered":8,"RowNo":1},{"Deaths":3,"ForDate":"2020-03-26","NewDailyConfirmed":112,"NewDailyRecovered":1,"RowNo":1},{"Deaths":3,"ForDate":"2020-03-27","NewDailyConfirmed":92,"NewDailyRecovered":4,"RowNo":1},{"Deaths":4,"ForDate":"2020-03-28","NewDailyConfirmed":99,"NewDailyRecovered":2,"RowNo":1},{"Deaths":8,"ForDate":"2020-03-29","NewDailyConfirmed":96,"NewDailyRecovered":2,"RowNo":1},{"Deaths":8,"ForDate":"2020-03-30","NewDailyConfirmed":154,"NewDailyRecovered":29,"RowNo":1},{"Deaths":10,"ForDate":"2020-03-31","NewDailyConfirmed":110,"NewDailyRecovered":49,"RowNo":1},{"Deaths":16,"ForDate":"2020-04-01","NewDailyConfirmed":157,"NewDailyRecovered":50,"RowNo":1},{"Deaths":21,"ForDate":"2020-04-02","NewDailyConfirmed":165,"NewDailyRecovered":99,"RowNo":1},{"Deaths":25,"ForDate":"2020-04-03","NewDailyConfirmed":154,"NewDailyRecovered":64,"RowNo":1},{"Deaths":29,"ForDate":"2020-04-04","NewDailyConfirmed":140,"NewDailyRecovered":69,"RowNo":1},{"Deaths":34,"ForDate":"2020-04-05","NewDailyConfirmed":223,"NewDailyRecovered":68,"RowNo":1},{"Deaths":38,"ForDate":"2020-04-06","NewDailyConfirmed":121,"NewDailyRecovered":63,"RowNo":1},{"Deaths":41,"ForDate":"2020-04-07","NewDailyConfirmed":272,"NewDailyRecovered":64,"RowNo":1},{"Deaths":41,"ForDate":"2020-04-08","NewDailyConfirmed":137,"NewDailyRecovered":16,"RowNo":1},{"Deaths":44,"ForDate":"2020-04-09","NewDailyConfirmed":355,"NewDailyRecovered":35,"RowNo":1},{"Deaths":47,"ForDate":"2020-04-10","NewDailyConfirmed":364,"NewDailyRecovered":19,"RowNo":1},{"Deaths":52,"ForDate":"2020-04-11","NewDailyConfirmed":382,"NewDailyRecovered":35,"RowNo":1},{"Deaths":59,"ForDate":"2020-04-12","NewDailyConfirmed":429,"NewDailyRecovered":41,"RowNo":1}],
    "synchronizeGrid":true,
    "valueAxes": [{
        "id":"v1",
        //"axisColor": "#ee7b0b",
        "autoGridCount": false,
        "labelOffset": 15,
        "minHorizontalGap": 100,
        "gridCount": 8,
        "minorGridEnabled": false,
        "position": "left",
        "inside": false,
    }, {
        "id":"v2",
        //"axisColor": "#FF0000",
            "autoGridCount": false,
            "labelOffset": 15,
            "minHorizontalGap": 100,
            "gridCount": 8,
            "minorGridEnabled": false,
            "position": "right",
            "inside": false,
    }, {
        "id":"v3",
        "autoGridCount": false,
        "labelOffset": 15,
        "minHorizontalGap": 100,
        "gridCount": 8,
        "minorGridEnabled": false,
        "position": "right",
        "inside": false,
    }],
    "graphs": [{
        "valueAxis": "v1",
        "type": "smoothedLine",
        "labelOffset" : 5,
        "lineColor": "#ee7b0b",
        "bullet": "round",
        "bulletBorderThickness": 1,
        "lineThickness": 3,
        'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
        "title": "NewDailyConfirmed",
        "labelText" : "[[value]]",
        "valueField": "NewDailyConfirmed",
    "fillAlphas": 0
    }, {
         "valueAxis": "v1",
            "lineColor": "#FF0000",
            "type": "smoothedLine",
            "bullet": "square",
            'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
        "bulletBorderThickness": 1,
            "lineThickness": 3,
            "labelOffset": 5,
           "labelPosition" : "bottom",
            "title": "Deaths",
            "labelText": "[[value]]",
        "valueField": "Deaths",
    "fillAlphas": 0
    }, {
        "valueAxis": "v1",
            "lineColor": "#7CB5EC",
            "type": "smoothedLine",
        "bullet": "triangleUp",
            "bulletBorderThickness": 1,
            'balloonText': '[[category]]<br><b><span style=font-size:14px;>[[value]]</span></b>',
            "lineThickness": 3,
            "labelOffset": 10,
            "title": "NewDailyRecovered",
            "labelText": "[[value]]",
            "valueField": "NewDailyRecovered",
    "fillAlphas": 0
    }],
    "chartCursor": {
        'cursorAlpha': 0,
        'valueLineEnabled': true,
        'valueLineBalloonEnabled': true,
        'valueLineAlpha': 0.5,
        'categoryBalloonColor': '#E2EEF6',
        'color': '#000'
    },
    "categoryField": "ForDate",
        "categoryAxis": {
            'parseDates': false,
            'minHorizontalGap': 110,
            'labelsEnabled': false,

            'axisColor': '#fff', 'minorGridEnabled': false, 'autoGridCount': false, 'gridCount': 8, 'labelOffset': 10
        },
        "legend": {
            "useGraphSettings": true,
            "position": "bottom",
        },
});
 #MultiAxisCovidChartDiv {
        width: 100%;
        height: 400px;
    }
<div id="MultiAxisCovidChartDiv" class="multiple_covid_charts"></div>
<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/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />

Теперь вы можете видеть каждый ярлык в верхней части каждой точки, я хочу показать ярлык после определенного разрыва точек, как после 3 очков Я хочу показать лейбл. Возможно ли, если да, то как?

...