小编Kab*_*lak的帖子

我有Highcharts库的问题.我使用Jaspersoft Studio中提供的自定义可视化工具创建了各种图表.它们不使用所有相同的库,例如我有一个使用Highmaps.js的Bubble Map图表和一个使用Highstock.js的Stock图表.

当我在Jaspersoft Server中将其可视化时,每个报告似乎都运行良好.但是当我创建一个包含两个不同报告的仪表板时,我有这个错误:

未捕获的Highcharts错误#16:www.highcharts.com/errors/16已在页面中定义的Highcharts

第二次在同一页面中加载Highcharts或Highstock时会发生此错误,因此已经定义了Highcharts命名空间.请记住Highcharts.Chart构造函数和Highcharts的所有功能都包含在Highstock中,因此如果您组合运行Chart和StockChart,则只需加载highstock.js文件.

我确实理解Highmaps.js和Highstock.js之间存在冲突,因为它们具有共同的特征.但我不知道如何避免它:我需要来自Highmaps和Highstocks的功能.以下是我如何包含这些库来定义报告:

-1st图表(股票图表)

define(['jquery', 'highstock'], function(hs_test) {
  return function(instanceData) {
    /*...*/
  }
});

第2个图表(气泡图表)

define(['jquery','highmaps','data','world','exporting'], function (mapbubble) {
  return function(instanceData) {
    /*...*/
  }
});

以下是我编写build.js文件的方法:

({
  optimize: 'none',
  baseUrl: '',
  paths: {
    jquery: 'jquery',
    highstock: 'highstock',
    exporting: 'exporting',
    'highstock_test': 'highstock_test'
  },
  shim: {
    'highstock': {
      deps: ["jquery"],
      exports: 'Highcharts'
    }
  },

  name: "highstock_test",
  out: "highstock_test.min.js"
})

我在这里使用了Highstock示例,但我对使用Highmaps的报告做了大致相同的事情.我希望我不是第一个遇到这个问题的人,如果有的话,有人能建议我一种避免这种库重复的方法吗？

编辑

正如所建议的那样,我尝试用highstock.js + map.js替换highmaps.js,如下所示:

define(['jquery','highstock','map','data','world','exporting'], function ($, Highcharts) {
return function (instanceData) {
/*...*/
}
})

我现在有一个错误17: …

我想创建一个Highcharts图表,其中div有一个onclick函数,但我不希望导出按钮处理点击事件.它应该作为正常的导出按钮作出反应.

通过获取Highcharts Buttons类highcharts-button,我尝试了一些jQuery技巧来避免它:但它不起作用:

jQuery("#container").on('click', ':not(.highcharts-button, .highcharts-button *)', function(e){
        e.stopPropagation();
        alert('CLICK');
    });

这是我的JSFiddle.(问题是:单击"导出"按钮时,我不希望看到警报弹出).