使用vue-chartjs连续显示两个数字

Question

I use vue-chartjs to display some figures in my vue application in which I use semantic-ui for the layout.

I would like to have two figures next to each other on the screen but somehow I do not manage this.

I tried using template as in my other components but this does not seem to work with vue-chartjs. I also tried to use two fields functionality from semantic ui without success.

Here is some code snippets:

<template>
  <div class="DisplayResults">
    <div class="ui relaxed divided padded full grid">
      <div class="column">
        <div class="ui tiny form">
          <div class="two fields">
      <div class="field eight wide">
        <Chart class="Chart" v-model="resultsData" v-if="hasResults" />
      </div>
      <div class="field eight wide">
        <ChartN class="Chart" v-model="resultsData" v-if="hasResults"/>
      </div>
    </div>
  </div>
</template>

import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

export default {
  name: 'DisplayResults',
  CaseDataState,
  components: {
    Chart,
    ChartN
  },
  data: function () {
    return { computing: false }
  },
  computed: {
    hasResults () {
      return (this.resultsData.time) && !(this.computing)
    },
    resultsData () {
      return CaseDataState.getters.resultsData
    }
  }
}
</script>

Can anybody help how I can achieve this?

Answer 1

I solved my issue. Apparently the problem was with my usage of semantic ui. Here is what worked for me in the end:

<template>
  <div class="DisplayResults">
    <h1 class="ui header" v-if="hasResults">Results</h1>
    <div class="ui center aligned grid" v-if="hasResults">
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <Chart v-model="resultsData"/>
        </div>
      </div>
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <ChartN v-model="resultsData"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

export default {
  name: 'DisplayResults',
  components: {
    Chart,
    ChartN,  
    CaseDataState
  },
  computed: {
    hasResults () {
      return (this.resultsData.time) && !(this.running)
    },
    resultsData () {
      return CaseDataState.getters.resultsData
    }
  }
}
</script>

Thanks,

Clemens