Question

我正在为Kibana 6.2.4构建一个插件应用程序，我想添加两种类型的图表。我使用npm安装了ZingChart-AngularJS，并将zingchart模块注入到我的应用中。

这是我的 app.js：

import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import 'zingchart-angularjs';
import 'ui/autoload/styles';
import './less/style.less';
import index from './templates/index.html';

uiRoutes.enable();
uiRoutes
.when('/', {
  template: index,
  controller: 'getAllAlertsController',
  controllerAs: 'controller'
});
uiModules
.get('app/my_alerts',['zingchart-angularjs'])
.controller('getAllAlertsController', function ($scope) {  
  $scope.myData = [1,4,5,5,10];
});

这是我的 index.html：

<script src="https://cdn.zingchart.com/zingchart.min.js"></script>  
<script src="https://cdn.zingchart.com/angular/zingchart-angularjs.js"> </script>

<div class="container">
    <div class="row col-md-12 panel-default">
        <div class="panel-heading"> 
            <h1> My Alerts </h1> 
        </div>          
        <div class="panel-body"> 
             <zingchart id="chart-1" zc-values="controller.myData"></zingchart>  
        </div>
    </div>
</div>

我检查浏览器网络并加载所有内容！但是我的控制台出现此错误： zingchart未定义

这是我的package.json：

{
  "name": "my_alerts",
  "version": "0.0.1",
  "description": "An awesome Kibana plugin",
  "main": "index.js",
  "kibana": {
    "version": "6.2.4"
  },
  "scripts": {
    "lint": "eslint",
    "start": "plugin-helpers start",
    "test:server": "plugin-helpers test:server",
    "test:browser": "plugin-helpers test:browser",
    "build": "plugin-helpers build",
    "postinstall": "plugin-helpers postinstall"
  },
  "devDependencies": {
    "@elastic/eslint-config-kibana": "0.0.2",
    "@elastic/plugin-helpers": "^6.0.0",
    "babel-eslint": "4.1.8",
    "chai": "^3.5.0",
    "eslint": "1.10.3",
    "eslint-plugin-mocha": "1.1.0"
  },
  "dependencies": {
    "zingchart-angularjs": "^1.2.0"
  }
}

我错过了什么吗？是否有人与Kibana合作并注入了任何包裹？

将ZingChart-AngularJS添加到Kibana App中-未定义zingchart

0 个答案: