AmCharts未加载图片/ SVG

Question

所以我偶然发现AmCharts，一个制作图表和图表的工具，但问题是，我不确定如何让它们与webpack很好地协同工作。

我遇到的问题是AmCharts无法在node_module内找到自己的SVG图片。

实施例

图表初始化和设置：

应该说，我在Webpack上使用Vue.JS。 我在main.js脚本中导入了amcharts.js和serial.js，所以我可以在整个网站上使用这些图表，但是我忘了导入别的东西，或者是webpack可能会弄乱我吗？ 我能够从资产中加载单独的SVG文件，但是我似乎无法让AmCharts在他们的库中加载他们自己的SVG文件，这应该自动完成，他们正在尝试但是当我收到404错误时加载图表。

谈到Webpack支持和AmChart支持，但他们只是将这个问题推给了其他人。所以最终在这里发布了这个问题。

还应该提到我尝试使用AmCharts中的选项映射到图像，以便找到文件，我甚至尝试将所有图像从node_modules amcharts文件夹复制到我的资源并指向新文件夹，但是没有运气。

感谢任何帮助，谢谢！

祝你好运 托拜厄斯

Answer 1

默认情况下，amCharts会尝试在与amcharts.js相同的目录中查找其图像。如果您要导入那些包含其他方式而不是通过<script>标记，则可能会失败。

要解决此问题，您需要将path属性设置为指向amCharts手动安装的位置。即：

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

或者，您可以将全局AmCharts_path变量设置为指向amCharts文件所在的路径。即：

var AmCharts_path = "/libs/amcharts/";

P.S。您不需要指定/ 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')

希望有所帮助。