基于 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"
  }]

看起来好像自定义项目符号覆盖了边框粗细、颜色和 alpha。有没有解决的办法？边框不必与图片内容的形状相匹配，显然，沿着边缘即可。

新发展：我能够弄清楚如何为每个项目符号添加自定义 class，但我无法修改 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

除了@gerric 建议使用 SVG 项目符号之外，还有另一个解决方法。

使用两个重叠图：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>

基于 amcharts 中自定义项目符号周围的数据值创建边框？

Creating a border based on a data value around a custom bullet in amcharts?

amcharts