Question

我正在使用 Chart.js ，并且我需要实现缩放功能：幸运的是chart zoom plugin已经满足了我的需要。很好！如果仅在社区内实现此插件不是问题。这是我得到的错误：

Uncaught SyntaxError: Unexpected identifier

Zoom Javascript插件

'use strict';

import Chart from './Chart.min.js'; // here is the line, from the plugin, that produces this error
import Hammer from './hammer.min.js';

图表创建

var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
new Chart(canvasContext, {
    type: 'LineWithLine', // this is a custom chart type, dwai
    data: {
        labels: hourLabels,
        datasets: dataToRender
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,

        title: { // sets the graph title
            display: false
        },

        scales: { // deactivates the y axis' values and replaces it with 'labelString' value
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: unit
                }
            }],

            xAxes: [{
                time: {
                    unit: 'day'
                }
            }]
        },

        tooltips: {
            mode: 'index', // display the labels + values for all data points at that x-value 
            intersect: false,
            titleFontSize: 14,
            bodyFontSize: 14
        },

        // PLUGIN ZOOM : pan options
        pan: {
            // Boolean to enable panning
            enabled: true,

            // Panning directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow panning in the y direction
            mode: 'xy',
            rangeMin: {
                // Format of min pan range depends on scale type
                x: null,
                y: null
            },
            rangeMax: {
                // Format of max pan range depends on scale type
                x: null,
                y: null
            },
            // Function called once panning is completed
            // Useful for dynamic data loading
            onPan: function({chart}) { console.log(`I was panned!!!`); }
        },

        // PLUGIN ZOOM : zoom options
        zoom: {
            // Boolean to enable zooming
            enabled: true,

            // Enable drag-to-zoom behavior
            drag: true,

            // Drag-to-zoom rectangle style can be customized
            // drag: {
            //   borderColor: 'rgba(225,225,225,0.3)'
            //   borderWidth: 5,
            //   backgroundColor: 'rgb(225,225,225)'
            // },

            // Zooming directions. Remove the appropriate direction to disable 
            // Eg. 'y' would only allow zooming in the y direction
            mode: 'xy',
            rangeMin: {
                // Format of min zoom range depends on scale type
                x: null,
                y: null
            },
            rangeMax: {
                // Format of max zoom range depends on scale type
                x: null,
                y: null
            },
            // Function called once zooming is completed
            // Useful for dynamic data loading
            onZoom: function({chart}) { console.log(`I was zoomed!!!`); }
        }
    }
});

Chart.min.js与缩放插件位于同一目录。我做错了什么？ 谢谢！

Answer 1

好的，解决方法是

1）删除导入末尾的“ .js”。现在看起来像这样：import Chart from './Chart.min';
2）获得插件的0.6.6缩小版本，而不是在/src文件夹中查看！

Javascript：导入产生语法错误

1 个答案: