AmCharts沒有加載圖像/ SVG

Question

所以我偶然發現AmCharts ，一個制作圖表和圖形的工具，但問題是，我不確定如何使它們與webpack很好地協同webpack 。

我的問題是， AmCharts找不到里面自己的SVG圖像node_module 。

例：

圖表初始化和設置：

應該說，我正在使用Vue.JS和Webpack。 我在main.js腳本中導入amcharts.js和serial.js，所以我可以在整個網站上使用這些圖表，但是我忘了導入別的東西，或者是webpack可能會弄亂我嗎？ 我能夠從資產中加載單獨的SVG文件，但我似乎無法讓AmCharts在他們的庫中加載他們自己的SVG文件，這應該自動完成，他們正在嘗試但是我在加載時遇到404錯誤圖表。

談到Webpack支持和AmChart支持，但他們只是將這個問題推給了其他人。 所以最終在這里發布了這個問題。

還應該提到我嘗試使用AmCharts中的選項映射到圖像，以便找到文件，我甚至嘗試將所有圖像從node_modules amcharts文件夾復制到我的資產並指向新文件夾，但沒有運氣。

感謝任何幫助，謝謝！

最好的問候托比亞斯

Answer 1

默認情況下，amCharts嘗試在與amcharts.js相同的目錄中查找其圖像。 如果您要導入那些包含除<script> via <script>標簽以外的其他方式，則可能會失敗。

要解決此問題，您需要將path屬性設置為指向amCharts手動安裝的位置。 即：

AmCharts.makeChart("chartdiv", {
  "type": "serial",
  "path": "/libs/amcharts/",
  // ...
});

或者，您可以將全局AmCharts_path變量設置為指向amCharts文件所在的路徑。 即：

var AmCharts_path = "/libs/amcharts/";

PS你不需要指定/ images /目錄的完整路徑。 它將假設它在主要的amCharts目錄下。

Answer 2

在使用rails和JS Amcharts時，我遇到了類似的問題。

amcharts查找圖像由路徑設置this.pathToImages變量中amcharts.js 。

1-將其值更新為this.pathToImages="http://cdn.amcharts.com/lib/3/images/" ，不再需要本地圖像。

在此處找到： https ： //docs.amcharts.com/3/javascriptcharts/ChartScrollbar#example

2-另一種解決方法是通過jQuery更新圖像路徑。 例如，對於滾動條圖像，您可以執行$("#chart_div > div > div > svg > g:nth-child(12) > g:nth-child(2) > g:nth-child(7) > image").attr('xlink:href', '/path/to/image')

希望有所幫助。