所以我偶然发现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文件夹复制到我的资源并指向新文件夹,但是没有运气。
感谢任何帮助,谢谢!
祝你好运 托拜厄斯
答案 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')
希望有所帮助。