无需Import/NPM，通过CDN在Vue.js中用FusionCharts插件遇错求助

你遇到的这个错误是因为vue-fusioncharts组件没有正确获取到FusionCharts的核心实例。当通过CDN引入这些库时，需要显式地将FusionCharts、图表模块和主题传递给Vue插件，而不是仅仅调用Vue.use(VueFusionCharts)。下面是具体的解决方案：

错误原因分析 #

你的代码中已经通过CDN引入了所有必要的库，但没有在Vue注册插件时关联FusionCharts的全局实例。vue-fusioncharts需要明确知道要使用的FusionCharts核心对象、图表类型和主题，否则无法初始化图表构造函数，就会抛出e is not a constructor的错误。

修正后的完整代码 #

<html>
<head>
  <!-- 换成更稳定的Vue 2.x版本，和vue-fusioncharts兼容性更好 -->
  <script type="text/javascript" src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/fusioncharts@3.19.0/fusioncharts.js"></script>
  <script type="text/javascript" src="https://unpkg.com/fusioncharts@3.19.0/fusioncharts.charts.js"></script>
  <script type="text/javascript" src="https://unpkg.com/fusioncharts@3.19.0/themes/fusioncharts.theme.fint.js"></script>
  <!-- 使用和Vue 2兼容的vue-fusioncharts版本 -->
  <script type="text/javascript" src="https://unpkg.com/vue-fusioncharts@1.2.0/dist/vue-fusioncharts.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    body {
      font-family: Roboto;
      font-size: 12px;
    }
  </style>
</head>
<body>
  <div id="chart1">
    <fusioncharts 
      :type="type" 
      :dataformat="dataFormat" 
      :datasource="dataSource" 
      :width="width" 
      :height="height" 
      :events="events"
    ></fusioncharts>
    <p class="message-box">
      The value that you have selected is: {{ displayValue }}
    </p>
  </div>

  <script type="text/javascript">
    // 注册Vue插件时，显式传入FusionCharts的全局实例
    Vue.use(VueFusionCharts, {
      FusionCharts: window.FusionCharts,
      Charts: window.FusionCharts.Charts,
      Themes: window.FusionCharts.Themes
    });

    var chart = new Vue({
      el: '#chart1',
      data: {
        type: 'Column2D',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
          chart: {
            caption: 'Vue FusionCharts Sample',
            theme: 'fint'
          },
          data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
        },
        displayValue: 'nothing'
      },
      methods: {
        // 用methods代替直接修改实例属性，更符合Vue的响应式规范
        onDataplotRollover(ev, props) {
          this.displayValue = props.displayValue;
        }
      },
      // 把events定义为函数，避免直接引用外部实例导致的上下文问题
      computed: {
        events() {
          return {
            dataplotRollover: this.onDataplotRollover
          };
        }
      }
    });
  </script>
</body>
</html>

关键修改点 #

1. 版本兼容性调整：将Vue升级到2.6.14（稳定的Vue 2最后一个版本），同时匹配了兼容的vue-fusioncharts版本（1.2.0），避免版本不兼容导致的隐性问题。
2. 显式传递FusionCharts实例：在Vue.use(VueFusionCharts)时，传入window上的FusionCharts相关对象，让插件能正确获取图表构造函数。
3. 响应式代码优化：把事件处理逻辑放到Vue的methods中，用computed返回事件配置，避免直接操作实例属性带来的上下文问题，更符合Vue的开发规范。

这样修改后，你的图表应该能正常渲染，鼠标悬停显示数值的功能也能正常工作了。

内容的提问来源于stack exchange，提问作者ChakirBelhaj