# Kibanaプラグインで visualization ディレクティブを使用したい

**URL:** <https://discuss.elastic.co/t/kibana-visualization/107353>\
**Category:** 日本語による質問・議論はこちら\
**Created:** [November 13, 2017, 8:29am UTC](https://discuss.elastic.co/t/kibana-visualization/107353 "2017-11-13T08:29:53Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![drumn](https://avatars.discourse-cdn.com/v4/letter/d/8edcca/32.png) [@drumn](https://discuss.elastic.co/u/drumn)\
**Post date:** [November 13, 2017, 8:29am UTC](https://discuss.elastic.co/t/kibana-visualization/107353/1 "2017-11-13T08:29:53Z")

</div>

お世話になっております。

kibana6.0.0-rc2にて下記に記載されている、 ディレクティブを使ったVisualizeのサンプルコードを、  
動作させたいのですが、サーバコンソール、ブラウザコンソールにエラーは出力されていないのですが、  
Visualizeが表示されず真っ白な画面となっております。  
[https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html](https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html)

・コードは下記の通りです。

index.html

```
<div ng-controller="KbnTestController" class="test_vis">
  <visualization vis='vis' vis-data='visData'></visualize>
</div>

```

・app.js

```
import { uiModules } from 'ui/modules';
import uiRoutes from 'ui/routes';
import template from './template/index.html';
import { VisProvider } from 'ui/vis';
import './less/app.less';
import 'ui/courier';
import 'ui/modals';

uiRoutes.enable();
uiRoutes
.when('/', {
  template
});

uiModules.get('kibana')
.controller('KbnTestController', function ($scope, Private) {
  const Vis = Private(VisProvider);
  const visConfig = {
    type: 'metric'
  };
  $scope.vis = new Vis('b9e56600-a27d-11e7-94dc-eb7c16196973', visConfig);
  $scope.visData = [{ columns: [{ title: 'Count' }], rows: [[1024], [256]] }];
});

```

・app.less

```
@import (reference) "~ui/styles/mixins.less";

.test_vis-app {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.test_vis, visualize, visualization {
  display: flex;
  flex: 1 1 100%;
}

```

どのように修正すれば、Visualizeを表示することが出来るのか、ご教示いただけないでしょうか。  
よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![johtani](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/johtani/32/44956_2.png) [@johtani](https://discuss.elastic.co/u/johtani)\
**Post date:** [November 17, 2017, 6:39am UTC](https://discuss.elastic.co/t/kibana-visualization/107353/2 "2017-11-17T06:39:12Z")

</div>

```auto
 $scope.vis = new Vis('b9e56600-a27d-11e7-94dc-eb7c16196973', visConfig);

```

とありますが、[Embedding Visualizations](https://www.elastic.co/guide/en/kibana/master/development-embedding-visualizations.html)では、Visのコンストラクターの第1引数は`indexPattern`となっています。指定されているインデックスがあるということでしょうか？UUIDっぽく見えるのですが。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [December 15, 2017, 6:39am UTC](https://discuss.elastic.co/t/kibana-visualization/107353/3 "2017-12-15T06:39:13Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.