【问题标题】：AmCharts not loading images / SVGAmCharts 未加载图像/SVG
【发布时间】：2016-04-20 08:17:08
【问题描述】：

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

我遇到的问题是AmCharts 在node_module 中找不到自己的 SVG 图像。

示例：

图表初始化和设置：

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

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

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

感谢任何帮助，谢谢！

最好的问候托比亚斯

【问题讨论】：

阅读documentation页面，在path/pathToImages属性中
这个和vue或者webpack没有关系。我将编辑标题。

标签： javascript svg webpack vue.js amcharts

【解决方案1】：

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

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

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

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

var AmCharts_path = "/libs/amcharts/";

附：您不需要指定 /images/ 目录的完整路径。它将假定它位于主 amCharts 目录下。

【讨论】：

试过这个，没有任何运气，我认为 webpack 可能会将我导入的文件压缩到单个 js 文件中，使 amCharts 很难找到它们。我确实尝试复制所有图像，然后直接使用“pathToImages”到我的资产，但也没有运气。
您能否检查浏览器的控制台以准确了解图表正在尝试（并且失败）加载的内容？然后确保这些文件在该路径中。

【解决方案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')

希望对您有所帮助。

【讨论】：