尝试在不使用导入功能/NPM 的情况下对 Vue Js 使用 "fusionchart plugin"

Question

问题
目前，我正在按照下面显示的 link 中的 fusionchart 指南进行操作。他们设置的唯一问题是他们使用了我无法使用的 IMPORT 功能。

我的问题
有没有办法让插件在我的 html 文件中工作，而无需通过 CDN 等导入功能？

Fusionchart 插件
https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs?utm_source=downloadPackage&utm_medium=referral&utm_campaign=trial

我试过的
关于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.$mount @ vue@2.3.3:7564
Vue.$mount @ vue@2.3.3:9663
Vue._init @ vue@2.3.3:4004
Vue @ 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.patch [as __patch__] (vue@2.3.3:5369)
    at Vue.Vue._update (vue@2.3.3:2320)
    at Vue.updateComponent (vue@2.3.3:2443)
    at Watcher.get (vue@2.3.3:2780)

Answer 1

看来我包含的 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>

尝试在不使用导入功能/NPM 的情况下对 Vue Js 使用 "fusionchart plugin"

Trying to use "fusionchart plugin" for Vue Js without the use of the import functionality / NPM

html

javascript

cdn

fusioncharts

vue.js