尝试在不使用导入功能/ NPM的情况下为Vue Js使用“ fusionchart插件”

编程问答 2022-08-11

问题描述

问题
目前，我正在按照下面显示的链接关注Fusionchart指南。他们设置的唯一问题是他们利用了我无法使用的IMPORT功能。

我的问题
有没有办法使插件在我的html文件中工作，而没有通过CDN等IMPORT功能？

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$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>
htmljavascriptvue.js