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。有没有解决的办法？边框不一定要与图片内容的形状相匹配，显然是沿着边缘。

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

这是一个有效的例子：

＆＃13;

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
  }
});

＆＃13;

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

＆＃13;

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

1 个答案: