最初の画像がAmchartsの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){ 
 
\t chart.zoomChart(); 
 
} 
 

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

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

<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> \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t