amchartsのカスタム弾丸の周りのデータ値に基づいて境界線を作成しますか？

Question

AMChartsでカスタム弾丸の周りに境界線を作成したいと思います。アイデアは、私のデータのある値に基づいて境界が異なる色になるということです。これは私のコードです。

graphs: [{ 
    "bullet": "round", 
    "bulletSize": 50, 
    "customBullet": "https://www.amcharts.com/lib/3/images/star.png?x", 
    "bulletBorderColor": "#00ff00" , 
    "bulletBorderThickness": 10, 
    "bulletBorderAlpha": 1, 
    "id": "AmGraph", 
    "title": "graph", 
    "type": "smoothedLine", 
    "valueField": "value", 
    "valueAxis": "ValueAxis-1" 
    }] 

境界線の太さ、色、アルファを上書きするかのように見えます。これを回避する方法はありますか？境界線は、写真の内容の形に合わせる必要はなく、明らかに端に沿っているだけです。

新しい開発： 私は各弾にカスタムクラスを追加する方法を見つけ出すことができましたが、境界線を表示するためにCSSを変更する際に問題があります。しばしばそうではなく、画像全体が消える。この周りに境界線を作る方法に関する提案はありますか？

<g transform="translate(173,27) scale(1)" aria-label="graph category" class="amcharts-graph-bullet CustomClass" fill-opacity="1" stroke-opacity="1"></g> 

私は

style="stroke: #0000ff; stroke-width: 4px;" 

が、まったく効果に追加することを試みました。

Answer 1

SVGの箇条書きを使用することの大まかな提案に加えて、もう1つの回避策があります。

2つのオーバーレイされたグラフを使用する：1通常のグラフをPNGの箇条書きで表示する。 2 - ちょうど弾丸の概要と透明グラフ：

"graphs": [{ 
    "bullet": "round", 
    "bulletSize": 50, 
    "customBullet": "https://www.amcharts.com/lib/3/images/star.png?x", 
    "bulletBorderColor": "#00ff00", 
    "bulletBorderThickness": 10, 
    "bulletBorderAlpha": 1, 
    "id": "AmGraph", 
    "title": "graph", 
    "type": "smoothedLine", 
    "valueField": "value", 
    "valueAxis": "ValueAxis-1" 
}, { 
    "bullet": "round", 
    "bulletSize": 50, 
    "bulletBorderColor": "#00ff00", 
    "bulletAlpha": 0, 
    "bulletBorderThickness": 2, 
    "bulletBorderAlpha": 1, 
    "valueField": "value", 
    "valueAxis": "ValueAxis-1", 
    "lineAlpha": 0, 
    "balloonText": "", 
    "visibleInLegend": false 
}] 

はここで働い例です：

var chart = AmCharts.makeChart("chartdiv", { 
 
    "type": "serial", 
 
    "theme": "light", 
 
    "dataProvider": [{ 
 
    "date": "2009-10-02", 
 
    "value": 5 
 
    }, { 
 
    "date": "2009-10-03", 
 
    "value": 15 
 
    }, { 
 
    "date": "2009-10-04", 
 
    "value": 13 
 
    }, { 
 
    "date": "2009-10-05", 
 
    "value": 17 
 
    }, { 
 
    "date": "2009-10-06", 
 
    "value": 15 
 
    }, { 
 
    "date": "2009-10-09", 
 
    "value": 19 
 
    }, { 
 
    "date": "2009-10-10", 
 
    "value": 21 
 
    }, { 
 
    "date": "2009-10-11", 
 
    "value": 20 
 
    }, { 
 
    "date": "2009-10-12", 
 
    "value": 20 
 
    }, { 
 
    "date": "2009-10-13", 
 
    "value": 19 
 
    }, { 
 
    "date": "2009-10-16", 
 
    "value": 25 
 
    }, { 
 
    "date": "2009-10-17", 
 
    "value": 24 
 
    }, { 
 
    "date": "2009-10-18", 
 
    "value": 26 
 
    }, { 
 
    "date": "2009-10-19", 
 
    "value": 27 
 
    }, { 
 
    "date": "2009-10-20", 
 
    "value": 25 
 
    }, { 
 
    "date": "2009-10-23", 
 
    "value": 29 
 
    }, { 
 
    "date": "2009-10-24", 
 
    "value": 28 
 
    }, { 
 
    "date": "2009-10-25", 
 
    "value": 30 
 
    }, { 
 
    "date": "2009-10-26", 
 
    "value": 72, 
 
    "customBullet": "https://www.amcharts.com/lib/3/images/redstar.png" 
 
    }, { 
 
    "date": "2009-10-27", 
 
    "value": 43 
 
    }, { 
 
    "date": "2009-10-30", 
 
    "value": 31 
 
    }], 
 
    "valueAxes": [{ 
 
    "axisAlpha": 0, 
 
    "dashLength": 4, 
 
    "position": "left" 
 
    }], 
 
    "graphs": [{ 
 
    "bullet": "round", 
 
    "bulletSize": 50, 
 
    "customBullet": "https://www.amcharts.com/lib/3/images/star.png?x", 
 
    "bulletBorderColor": "#00ff00", 
 
    "bulletBorderThickness": 10, 
 
    "bulletBorderAlpha": 1, 
 
    "id": "AmGraph", 
 
    "title": "graph", 
 
    "type": "smoothedLine", 
 
    "valueField": "value", 
 
    "valueAxis": "ValueAxis-1" 
 
    }, { 
 
    "bullet": "round", 
 
    "bulletSize": 50, 
 
    "bulletBorderColor": "#00ff00", 
 
    "bulletAlpha": 0, 
 
    "bulletBorderThickness": 2, 
 
    "bulletBorderAlpha": 1, 
 
    "valueField": "value", 
 
    "valueAxis": "ValueAxis-1", 
 
    "lineAlpha": 0, 
 
    "balloonText": "", 
 
    "visibleInLegend": false 
 
    }], 
 
    "chartCursor": { 
 
    //"graphBulletSize": 1, 
 
    "zoomable": false, 
 
    "valueLineEnabled": true, 
 
    "valueLineBalloonEnabled": true, 
 
    "valueLineAlpha": 0.2 
 
    }, 
 
    "autoMargins": false, 
 
    "dataDateFormat": "YYYY-MM-DD", 
 
    "categoryField": "date", 
 
    "valueScrollbar": { 
 
    "offset": 30 
 
    }, 
 
    "categoryAxis": { 
 
    "parseDates": true, 
 
    "axisAlpha": 0, 
 
    "gridAlpha": 0, 
 
    "inside": true, 
 
    "tickLength": 0 
 
    } 
 
});

<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/themes/light.js"></script> 
 
<div id="chartdiv" style="height: 200px;"></div>