Question

因此我们有一个显示多个图形的Kibana应用程序，并且我们正在尝试使用orderBars插件。它不会在90％的时间内工作，条形图堆叠在一起，而不是彼此相邻，偶尔会有正确的阵风和面板刷新，它会正常显示。我很确定它是requireJS的一个问题，但是我很难跟踪它。

以下是创建条形码的代码：

//This is the first few lines of the orderBars plugin:

(function($){
    console.log(plot);
    function init(plot){

此处的记录图未定义。这让我相信jquery.flot没有在orderBars之前被加载，但是在requireJS配置中我们要求flot作为对orderbars的依赖，并且甚至尝试将它添加到需要函数，如下所示，但无济于事。

//THIS IS THE PANEL Module.js, note that they don't define the flot items at the top. Unsure why not, adding them there doesn't see to fix or break anything.

define([
  'angular',
  'app',
  'lodash',
  'jquery',
  'kbn'
],
function (angular, app, _, $, kbn) {

...

 // Populate element.
      require(['jquery.flot', 'jquery.flot.orderBars'], function(){

        // Populate element
        try {
          // Add plot to scope so we can build out own legend
          if ((scope.panel.chart === 'bar') || (scope.panel.chart === 'line')) {
            plot = $.plot(elem, chartData, options);
          }
          // Populate legend
          if(elem.is(":visible")){
            setTimeout(function(){
              scope.legend = plot.getData();
              if(!scope.$$phase) {
                scope.$apply();
              }
            });
          }
        } catch(e) {
          elem.text(e);
        }
      });

任何想法都会有很大的帮助。谢谢

Stacked Bars

编辑请求requireJS配置，并更新moduleJS top以显示定义。原谅格式化。另外，如果你看错了，请告诉我，我没有写过大部分内容，并且想确定它是对的，还没有使用过requireJS。

require.config({
  baseUrl: 'app',
  urlArgs: "bust=" + (new Date()).getTime(),
  paths: {
    config:                   '../config',
    settings:                 'components/settings',
    kbn:                      'components/kbn',

    vendor:                   '../vendor',
    css:                      '../vendor/require/css',
    text:                     '../vendor/require/text',
    moment:                   '../vendor/moment',
    blob:                     '../vendor/blob',
    filesaver:                '../vendor/filesaver',
    chromath:                 '../vendor/chromath',
    angular:                  '../vendor/angular/angular',
    'angular-cookies':        '../vendor/angular/angular-cookies',
    'angular-dragdrop':       '../vendor/angular/angular-dragdrop',
    'angular-strap':          '../vendor/angular/angular-strap',
    'angular-sanitize':       '../vendor/angular/angular-sanitize',
    timepicker:               '../vendor/angular/timepicker',
    datepicker:               '../vendor/angular/datepicker',
    bindonce:                 '../vendor/angular/bindonce',

    lodash:                   'components/lodash.extended',
    'lodash-src':             '../vendor/lodash',
    bootstrap:                '../vendor/bootstrap/bootstrap',

    jquery:                   '../vendor/jquery/jquery-1.8.0',
    'jquery-ui':              '../vendor/jquery/jquery-ui-1.10.3',

    'extend-jquery':          'components/extend-jquery',

    'jquery.flot':            '../vendor/jquery/jquery.flot',
    'jquery.flot.pie':        '../vendor/jquery/jquery.flot.pie',
    'jquery.flot.events':     '../vendor/jquery/jquery.flot.events',
    'jquery.flot.selection':  '../vendor/jquery/jquery.flot.selection',
    'jquery.flot.stack':      '../vendor/jquery/jquery.flot.stack',
    'jquery.flot.stackpercent':'../vendor/jquery/jquery.flot.stackpercent',
    'jquery.flot.time':       '../vendor/jquery/jquery.flot.time',
    'jquery.flot.byte':       '../vendor/jquery/jquery.flot.byte',
    'jquery.flot.orderBars':  '../vendor/jquery/jquery.flot.orderBars',
    'jquery.odoticker':       '../vendor/jquery/jquery.odoticker',

    modernizr:                '../vendor/modernizr-2.6.1',
    numeral:                  '../vendor/numeral',
    jsonpath:                 '../vendor/jsonpath',
    elasticjs:                '../vendor/elasticjs/elastic-angular-client',

    'jspdf':                  '../vendor/jspdf/jspdf',
    'swfobject':              '../vendor/jspdf/swfobject',
    'downloadify':            '../vendor/jspdf/downloadify.min',

    'h2c':                          '../vendor/jspdf/html2canvas',
    'c2h':                          '../vendor/jspdf/canvas2image',
    'png':                          '../vendor/jspdf/png',
    'zlib':                         '../vendor/jspdf/zlib',
    'addimg':                   '../vendor/jspdf/jspdf.plugin.addimage',
    'pngSup':                   '../vendor/jspdf/jspdf.plugin.png_support',
    'base64':                                 '../vendor/jspdf/base64'
},
shim: {
angular: {
  deps: ['jquery','config'],
  exports: 'angular'
},

bootstrap: {
  deps: ['jquery']
},

modernizr: {
  exports: 'Modernizr'
},

jsonpath: {
  exports: 'jsonPath'
},

jquery: {
  exports: 'jQuery'
},

// simple dependency declaration
//
'jquery-ui':            ['jquery'],
'jquery.flot':          ['jquery'],
'jquery.flot.byte':     ['jquery', 'jquery.flot'],
'jquery.flot.orderBars':['jquery', 'jquery.flot'],
'jquery.flot.pie':      ['jquery', 'jquery.flot'],
'jquery.flot.events':   ['jquery', 'jquery.flot'],
'jquery.flot.selection':['jquery', 'jquery.flot'],
'jquery.flot.stack':    ['jquery', 'jquery.flot'],
'jquery.flot.stackpercent':['jquery', 'jquery.flot'],
'jquery.flot.time':     ['jquery', 'jquery.flot'],

'angular-sanitize':     ['angular'],
'angular-cookies':      ['angular'],
'angular-dragdrop':     ['jquery','jquery-ui','angular'],
'angular-loader':       ['angular'],
'angular-mocks':        ['angular'],
'angular-resource':     ['angular'],
'angular-route':        ['angular'],
'angular-touch':        ['angular'],
'bindonce':             ['angular'],
'angular-strap':        ['angular', 'bootstrap','timepicker', 'datepicker'],

timepicker:             ['jquery', 'bootstrap'],
datepicker:             ['jquery', 'bootstrap'],

elasticjs:              ['angular', '../vendor/elasticjs/elastic'],

'jspdf':                 ['jquery'],
'swfobject':             ['jspdf'],
'downloadify':           ['jspdf'],

'h2c':                   ['jspdf', 'base64', 'c2h'],
'c2h':                   ['jspdf', 'base64'],
'zlib':                  ['jspdf'],
'addimg':                ['jspdf', 'base64'],
'pngSup':                ['jspdf']
},
 waitSeconds: 60
 });

Flot和OrderBars插件栏堆叠

0 个答案: