старшие диаграммы по оси x не обновляются динамически vuejs - PullRequest
Новая
       7

старшие диаграммы по оси x не обновляются динамически vuejs

0 голосов
/ 20 мая 2018

Ниже приведено работающее приложение highchart. В смонтированном виде я назову сообщение axios, которое выберет метки оси x в виде массива. Но категории старшей оси x не обновляются с данным массивом

Ниже приведенакод 

<template>
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div id="container" style="min-width: 100%; max-width:100%; height: 600px; margin: 0 auto"></div>
        </div>
      </div>
    </div>
</template>

<script>
var $ = require('../../node_modules/jquery/dist/jquery.js')
var Highcharts = require('highcharts')
// Load module after Highcharts is loaded
require('highcharts/modules/exporting')(Highcharts)
// Create the chart
$(function () {
  Highcharts.chart('container', {
    chart: {
      marginTop: 120,
      marginBottom: 100,
      type: 'bar'
    },
    credits: {enabled: false},
    exporting: {enabled: false},
    legend: {
      enabled: true,
      layout: 'vertical',
      backgroundColor: '#FFFFFF',
      floating: true,
      align: 'right',
      verticalAlign: 'bottom',
      margin: 50,
      reversed: true
    },
    title: {text: null},
    tooltip: {},
    plotOptions: {
      series: {
        stacking: 'normal'
      }
    },
    series: [{
      name: 'viewers',
      color: '#006666',
      pointWidth: 40,
      data: [8, 16]
    }, {
      name: 'calls',
      color: '#00FF00',
      pointWidth: 40,
      data: [7, 14]
    }, {
      name: 'chats',
      color: '#FF8C00',
      pointWidth: 40,
      data: [8, 16]
    }],
    xAxis: {
      categories: [],
      labels: {
        overflow: 'right',
        display: 'block',
        align: 'left',
        x: 5,
        style: {
          fontSize: '1em',
          color: '#000',
          width: '500px'
        }
      }
    },
    yAxis: {
      min: 0,
      allowDecimals: false,
      title: {
        text: ''
      }
    }
  })
})
export default {
  data () {
    return {
    }
  },
  mounted () {
   //will fetch labels from db
    var arr = ['computers', 'games']
    this.catList = arr
  }
}
</script>
<style scoped>
  .container{
    margin: 0 auto;
  }
  #container{
    margin: 0 auto;
    min-width: 100%;
    padding: 0; 
    max-width:100%; 
    height: 400px; 
    margin: 0 auto;
  }
</style>

Пожалуйста, дайте решение вышеуказанной проблемы.

1 Ответ

0 голосов
/ 20 мая 2018

Чтобы сделать categories реактивным, вы должны поместить код Highchart внутри компонента

Обратите внимание, что в конфигурации xAxis нам нужно поставить categories: this.categories

new Vue({
 el: '#app',
 data() {
  return {
   chart: null,
   categories: []
  }
 },
 mounted() {
  this.drawChart()

  // example after pull data

  var arr = ['computers', 'games']
  const vm = this;
  setTimeout(function() {
   vm.categories = arr
   vm.drawChart()
  }, 2000)
 },
 methods: {
  drawChart() {
   if (this.chart) {
    this.chart.destroy();
   }
   this.chart = Highcharts.chart('container', {
    chart: {
     marginTop: 120,
     marginBottom: 100,
     type: 'bar'
    },
    credits: {
     enabled: false
    },
    exporting: {
     enabled: false
    },
    legend: {
     enabled: true,
     layout: 'vertical',
     backgroundColor: '#FFFFFF',
     floating: true,
     align: 'right',
     verticalAlign: 'bottom',
     margin: 50,
     reversed: true
    },
    title: {
     text: null
    },
    tooltip: {},
    plotOptions: {
     series: {
      stacking: 'normal'
     }
    },
    series: [{
     name: 'viewers',
     color: '#006666',
     pointWidth: 40,
     data: [8, 16]
    }, {
     name: 'calls',
     color: '#00FF00',
     pointWidth: 40,
     data: [7, 14]
    }, {
     name: 'chats',
     color: '#FF8C00',
     pointWidth: 40,
     data: [8, 16]
    }],
    xAxis: {
     categories: this.categories,
     labels: {
      overflow: 'right',
      display: 'block',
      align: 'left',
      x: 5,
      style: {
       fontSize: '1em',
       color: '#000',
       width: '500px'
      }
     }
    },
    yAxis: {
     min: 0,
     allowDecimals: false,
     title: {
      text: ''
     }
    }
   })
  }
 }

})

Рабочий пример:https://jsfiddle.net/a9eqd8th/

...