根據amcharts中的自定義項目符號中的數據值創建邊框？

我想在AMCharts中的自定義項目符號周圍創建邊框。這個想法是，根據我的數據中的某些值，邊框將會是不同的顏色。這是我現在的代碼：根據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;"

，但在所有沒有影響。

來源

2016-08-12 Timothy Elbert

如果使用自定義的子彈，您使用的是外部文件，完全覆蓋現有的子彈。您必須對子彈的來源進行更改。在你的情況下，製作一份star.png的副本，增加它的邊框，將它放在你的服務器上，並在你的圖表中引用這個文件。 – gerric

這將是我最後的手段。由於空間考慮，我寧願不必將圖像下載到服務器上，但是，我想這是一個選項。 –

如果你想使用svg文件作爲項目符號，你可以用css來調整它們。或者你可以下載它們，它應該比保存PNG小。 – gerric

除了使用SVG項目符號的@gerric建議之外，還有另一種解決方法。

使用兩個疊加圖：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>

來源

2016-08-17 07:36:32 martynasma

工程就像一個魅力，謝謝！ –

根據amcharts中的自定義項目符號中的數據值創建邊框？

回答

相關問題