Why are charts not centered?


#1

Please look at the picture
QQ%E6%88%AA%E5%9B%BE20180910195908


#2

Please explain what you’re trying to do and what you are struggling with. Thanks.


#3

Hello, I’d like to use a web page to make a preview of the flow charts. I have a lot of flow charts. I want them all to be displayed, just like the above, but these flow charts are not shown in the middle.


#4

How are you embedding the diagrams? Can you share some code?


#5

This is my code, a Vue project.

<template>
  <div class="diagram-list" v-loading="loading" ref="diagramList">
    <!-- <div class="diagram" v-for="(item,index) in modelList" :key="index" :ref="'diagram' + index"></div> -->
  </div>
</template>
<script>
import {mapGetters} from 'vuex';
import Viewer from 'bpmn-js/dist/bpmn-viewer.production.min.js'
export default {
  data () {
    return {
      loading: false,
      page: {
        current: 1,
        firstResult: 0,
        maxResults: 10
      }
    }
  },
  computed: {
    ...mapGetters([
      'currentEngine',
      'modelList'
    ])
  },
  mounted () {
    let self = this;
    let listDom = self.$refs.diagramList;
    let list = self.modelList;
    listDom.innerHTML = '';
    for (let i = 0;i < list.length;i++) {
      (function (i) {
        let div = document.createElement('div');
        div.className = 'diagram';
        listDom.appendChild(div);
        let viewer = new Viewer({
          container: div
        });
        viewer.importXML(list[i].bpmn, function (err) {
          if (err) {
            console.error(err);
          } else {
            viewer.get('canvas').zoom('fit-viewport');
          }
        });
      }(i));
    }
  }
}
</script>
<style scoped>
.diagram-list{
  height: 100%;
  background-color: #FFF;
}
.diagram-list /deep/ > .diagram{
  width: 25%;
  height: 220px !important;
  border: 1px solid #ccc;
  float: left;
}
</style>


#6

My method is to first generate the div elements from Vue, and then put the graph in Div.
I wonder if this is the right way. This is the way I can think of it.


#7

This is the effect I want, but it should be done with Vue.
I hope the chart can be in the middle.