AmCharts未加载图片/ SVG

时间:2016-04-20 08:17:09

标签: javascript svg webpack vue.js amcharts

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

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

实施例

enter image description here

图表初始化和设置:

enter image description here

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

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

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

感谢任何帮助,谢谢!

祝你好运 托拜厄斯

2 个答案:

答案 0 :(得分:4)

默认情况下,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目录下。

答案 1 :(得分: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')

希望有所帮助。