FusionCharts在同一个页面无法渲染两个图表问题

版权声明：一篇成长日记文章，没什么转载价值。 https://blog.csdn.net/zhaoyanga14/article/details/84964929

出现这种问题会有很多种情况，我来说一下我的这种情况吧。

我是去官网找了两个例子，把两个例子放在了同一个页面中展示，结果其中一个图表没有被渲染，上面显示“no data to display”。另一个渲染成功。

在官网给的例子中，声明FusionCharts变量是这样写的。

const dataSource = '${jsonStr}';
var myChart = new FusionCharts({
                  type: "radar",
                  renderAt: "mycharts",
                  width: "100%",
                  height: "100%",
                  dataFormat: "json",
                  dataSource
});

结果发现，这个dataSource属性，在不给它值的情况下，它会默认dataSource变量是它的dataSource。

- -、我也是傻了，我一开始是这样写的。

const dataSource = '${jsonStr}';
const dataSource2 = '${jsonStr2}';
var myChart = new FusionCharts({
                  type: "radar",
                  renderAt: "mycharts",
                  width: "100%",
                  height: "100%",
                  dataFormat: "json",
                  dataSource
});
var myChart2 = new FusionCharts({
                  type: "radar",
                  renderAt: "mycharts2",
                  width: "100%",
                  height: "100%",
                  dataFormat: "json",
                  dataSource2
});

这TM肯定不对啊！人家dataSource是属性名，我把变量名写上去，肯定会报“no data to display”错误啊。。。

所以。。。改成下面这样就对了。

const dataSource = '${jsonStr}';
const dataSource2 = '${jsonStr2}';
var myChart = new FusionCharts({
                  type: "radar",
                  renderAt: "mycharts",
                  width: "100%",
                  height: "100%",
                  dataFormat: "json",
                  dataSource: dataSource
});
var myChart2 = new FusionCharts({
                  type: "radar",
                  renderAt: "mycharts2",
                  width: "100%",
                  height: "100%",
                  dataFormat: "json",
                  dataSource: dataSource2
});

这样俩图表就正常渲染了。