javascript - 如何集成 chart.js

Question

我正在尝试将 chart.js 添加到我的 MVC 项目中。我已经通过 npm 安装了 chart.js，现在我猜我必须通过我的 app.init.js 文件来集成它？我怎样才能做到这一点？前端主要是用jquery编写的。我也尝试只包含 chart.min.js，但我仍然收到 Chart 未定义的错误。会不会有一些明显的东西我错过了？

// npm packages
import jQuery from 'jquery';

// React - Uncomment to use React
// import 'babel-polyfill';

// Foundation - Uncomment to use foundation
import Foundation from 'foundation-sites';

// Components
import AccessibilityContent from './globals/g-accessibility-content/g-accessibility-content';
import ExampleTodo from './components/c-example-todo/c-example-todo';
import Dropdown from './components/c-dropdown/c-dropdown';
import LinksList from './components/c-links/c-links';
import ToggleIcon from './components/c-icon-toggle/c-icon-toggle';
import Cookie from './components/c-cookie/c-cookie';
import GrantDetailsToggle from './components/c-grant-details/c-grant-details';
import Hero from './components/c-hero/c-hero';
import FilterButtons from './components/c-filter/c-filter.js';
import EventMapToggle from './components/c-event-details/c-event-details.js';
import Quote from './components/c-quote/c-quote.js';
import Map from './components/c-map/c-map.js';
import Swipe from './components/c-swipe/c-swipe.js';
import Tooltip from './components/c-tooltip/c-tooltip.js';
import Datebox from './components/c-datebox/c-datebox.js';
import ToggleButtons from './components/c-toggle/c-toggle.js';
import Duotone from './components/c-duotone/c-duotone.js';
import ArchivedListToggle from './components/c-my-cases/c-my-cases.js';
import HorizontalStackedBar from './components/c-horizontal-stacked-bar/c-horizontal-stacked-bar.js';
import Compare from './components/c-compare/c-compare.js';
import AddItem from './components/c-add-item/c-add-item.js';
import PercentBar from './components/c-percent-bar/c-percent-bar.js';
import InfoBox from './components/c-info-box/c-info-box.js';
import SearchLocation from './components/c-search-location/c-search-location.js';
import MapResults from './components/c-map-results/c-map-results.js';
import VideoBlock from './components/c-video-block/c-video-block.js';

// Globals
import MobileNavigation from './globals/g-navigation-mobile/g-navigation-mobile';
import DesktopNavigation from './globals/g-navigation-desktop/g-navigation-desktop';
import Menu from './globals/g-menu/g-menu';
import FooterScroll from './globals/g-footer/g-footer';
import SideNav from './globals/g-sidenav/g-sidenav';
import SearchGlobal from './globals/g-search-global/g-search-global.js';
import StickyHeader from './globals/g-header/g-header.js';

'use strict';
module.exports = (() => {
    window.jQuery = window.jQuery || jQuery;
    window.$ = window.jQuery;
    
    // Foundation - Uncomment to use foundation
    Foundation.addToJquery(jQuery);
    
    jQuery(document).ready(() => {

        // Framework

        // Foundation - Uncomment to use foundation
        jQuery(document).foundation();

        // init
        ExampleTodo.init();
        AccessibilityContent.init();
        LinksList.init();
        Menu.init();
        MobileNavigation.init();
        DesktopNavigation.init();
        Dropdown.init();
        ToggleIcon.init();
        Cookie.init();
        FooterScroll.init();
        GrantDetailsToggle.init();
        Hero.init();
        FilterButtons.init();
        SideNav.init();
        SearchGlobal.init();
        EventMapToggle.init();
        Quote.init();
        Map.init();
        Swipe.init();
        StickyHeader.init();
        Tooltip.init();
        Datebox.init();
        ToggleButtons.init();
        Duotone.init();
        HorizontalStackedBar.init();
        Compare.init();
        AddItem.init();
        PercentBar.init();
        InfoBox.init();
        SearchLocation.init();
        ArchivedListToggle.init();
        MapResults.init();
        VideoBlock.init();

        // Load svg sprite
        jQuery.get('/Static/assets/icons/sprite.symbol.svg', (data) => {
            jQuery(data).find('svg').hide().appendTo('body')
        });

        // Add body class when using keyboard
        document.body.addEventListener('keydown',function(e) {
            let $code = e.keyCode || e.which;

            if ($code == '9') {
                document.body.classList.add('using-keyboard');
            }
        });

        document.body.addEventListener('mousedown',function() {
            document.body.classList.remove('using-keyboard');
        });

    });

})();

标签： javascriptasp.net-mvcchart.js