在Amcharts中，initialImage未显示在trendLine顶部

Question

我正在尝试使用趋势线的initialImage属性将图像放在趋势线的开头。但它没有达到趋势线的起点。

代码如下：

"trendLines": [ {
    "initialDate": "2017-10-26 18:52:13",
    "initialValue": 0,
    "lineColor": "#CC0000",
    "initialImage": {
      "svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
      "color": "#050",
      "width": 13,
      "height": 13,
      "rotation": 90,
      "offsetX": 4,
      "offsetY": -17,
      "balloonText": "2017-10-26 11:52:43"
    },
    "finalDate": "2017-10-26 18:52:13",
    "finalValue": 80
}],

这是DEMO。

Answer 1

initialImage被放置在initialValue和initialDate定义的位置，因此它实际上被放置在开头。在您的示例中，由于初始值相对于最终值，开头位于底部。如果希望它显示在该特定趋势线的顶部，请将其设置为finalImage。

​

var chart = AmCharts.makeChart("chartdiv", {
    "type": "serial",
    "theme": "light",
    "marginTop": 0,
    "marginRight": 80,
    "dataDateFormat": "YYYY-MM-DD HH:NN:SS",
    "dataProvider": [{
        "year": "2017-10-26 18:45:13",
        "value": 80
    }, {
        "year": "2017-10-26 18:46:13",
        "value": 2
    }, {
        "year": "2017-10-26 18:47:13",
        "value": 46
    }, {
        "year": "2017-10-26 18:48:13",
        "value": 22
    }, {
        "year": "2017-10-26 18:49:13",
        "value": 50
    }, {
        "year": "2017-10-26 18:50:13",
        "value": 24
    }, {
        "year": "2017-10-26 18:51:13",
        "value": 7
    }, {
        "year": "2017-10-26 18:52:13",
        "value": 5
    }, {
        "year": "2017-10-26 18:53:13",
        "value": 47
    }, {
        "year": "2017-10-26 18:54:13",
        "value": 35
    }],
       "valueAxes": [{
        "axisAlpha": 0,
        "guides": [{
            "fillAlpha": 0.1,
            "fillColor": "#888888",
            "lineAlpha": 0,
            "toValue": 16,
            "value": 10
        }],
        "position": "left",
        "tickLength": 0
    }],
    "graphs": [{
        "balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
        "bullet": "round",
        "dashLength": 3,
        "colorField":"color",
        "valueField": "value"
    }],
    "trendLines": [ {
        
        "initialDate": "2017-10-26 18:52:13",
        "initialValue": 0,
        "lineColor": "#CC0000",
        "finalImage": {
          "svgPath": "M6.84,25.682L24.316,15.5L6.684,5.318V25.682z",
          "color": "#050",
          "width": 13,
          "height": 13,
          "rotation": 90,
          "offsetX": 4,
          "offsetY": -17,
          "balloonText": "2017-10-26 11:52:43"
        },
        "finalDate": "2017-10-26 18:52:13",
        "finalValue": 80
    }],
    "categoryField": "year",
   
   "categoryAxis": {
        "parseDates": true,
        "axisAlpha": 0,
        "gridAlpha": 0.1,
        "minorGridAlpha": 0.1,
        "minorGridEnabled": true,
        "minPeriod": "fff"
    }
});
/*
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
	chart.zoomChart();
}

function zoomChart(){
    chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}*/

#chartdiv {
	width	: 100%;
	height	: 500px;
}																		

<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" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>																						

​