问题
目前，我正在下面显示的链接中遵循fusionchart指南。他们设置的唯一问题是他们使用了IMPORT功能，而我无法使用它。
我的问题
是否有一种方法可以使插件在我的html文件中工作，而不使用IMPORT功能，例如通过CDN？
Fusionchart插件
https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs?utm_source=downloadPackage&utm_medium=推荐&utm_campaign=试用
我尝试过的
关于CDN，我尝试过实现这一部分，但没有取得多大成功，下面是我当前的代码：
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript"
src="https://unpkg.com/fusioncharts@3.12.1/themes/fusioncharts.theme.fint.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-fusioncharts/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>
<!-- demo root element -->
<div id="chart1">
<fusioncharts :type="type" :dataformat="dataFormat" :datasource="dataSource" :width="width" :height="height"
:events="events" ref="fusioncharts">
</fusioncharts>
<p class="message-box">
The value that you have selected is: {{ displayValue }}
</p>
</div>
<script type="text/javascript">
Vue.use(VueFusionCharts);
// bootstrap the demo
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',
events: {
dataplotRollover: function (ev, props) {
chart.displayValue = props.displayValue;
}
}
}
});
</script>
</body>
</html>
我在控制台中得到的错误
vue@2.3.3:440 [Vue warn]: Error in mounted hook: "TypeError: e is not a constructor"
found in
---> <Fusioncharts>
<Root>
warn @ vue@2.3.3:440
handleError @ vue@2.3.3:525
callHook @ vue@2.3.3:2562
insert @ vue@2.3.3:3381
invokeInsertHook @ vue@2.3.3:5204
patch @ vue@2.3.3:5369
Vue._update @ vue@2.3.3:2320
updateComponent @ vue@2.3.3:2443
get @ vue@2.3.3:2780
Watcher @ vue@2.3.3:2763
mountComponent @ vue@2.3.3:2447
Vue$3.$mount @ vue@2.3.3:7564
Vue$3.$mount @ vue@2.3.3:9663
Vue._init @ vue@2.3.3:4004
Vue$3 @ vue@2.3.3:4089
(anonymous) @ index.html:38
vue@2.3.3:529 TypeError: e is not a constructor
at VueComponent.renderChart (vue-fusioncharts.min.js:1)
at VueComponent.boundFn [as renderChart] (vue@2.3.3:171)
at VueComponent.mounted (vue-fusioncharts.min.js:1)
at callHook (vue@2.3.3:2560)
at Object.insert (vue@2.3.3:3381)
at invokeInsertHook (vue@2.3.3:5204)
at Vue$3.patch [as __patch__] (vue@2.3.3:5369)
at Vue$3.Vue._update (vue@2.3.3:2320)
at Vue$3.updateComponent (vue@2.3.3:2443)
at Watcher.get (vue@2.3.3:2780)
我所包含的CDN似乎出现了一些问题，我对此进行了更改，代码正常工作。
<html>
<head>
<script type="text/javascript" src="https://unpkg.com/vue@2.3.3"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/fusioncharts.charts.js"></script>
<script type="text/javascript" src="https://rawgit.com/fusioncharts/vue-fusioncharts/feature/plugin-development/dist/vue-fusioncharts.js"></script>
<script type="text/javascript" src="https://unpkg.com/fusioncharts/themes/fusioncharts.theme.fint.js"></script>
</head>
<body>
<!-- demo root element -->
<div id="chart1">
<fusioncharts
:type="type"
:dataformat="dataFormat"
:datasource="dataSource"
:width="width"
:height="height"
:events="events"
ref="fusioncharts"
>
</fusioncharts>
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
</div>
<script type="text/javascript">
Vue.use(VueFusionCharts);
// bootstrap the demo
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',
events: {
dataplotRollover: function (ev, props) {
chart.displayValue = props.displayValue
}
}
}
});
</script>
</body>
</html>