admin 管理员组

文章数量: 1086019

im trying to create a chart for my vue.js site using Apexcharts however my chart isnt appearing at all.

-Apexcharts documentation Here

HTML

  <div class="section sec2"> 
    <div id="chart"></div>
    {{chart}} <--failed attempt
  </div>
...

JavaScript

<script>
import ApexCharts from 'apexcharts'
export default {
  // name: 'HelloWorld',
  props: {//////////this is how i use global variable with vue.js///////////////
    width:{           type: String, default: function(){return('width:')}},
  }
}
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30,40,45,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

CSS

<style>
  @import '../assets/style/sec.css';
#chart {
  max-width: 650px;
  margin: 35px auto;
}

</style>

i tried using the vue.js global variable by turning "var option = ..." into "option:...", but it only gave me an error.

im pretty sure its supossed to show in the div with the "#chart" id

any helpand or advice is greatly appreciated, thank you.

im trying to create a chart for my vue.js site using Apexcharts however my chart isnt appearing at all.

-Apexcharts documentation Here

HTML

  <div class="section sec2"> 
    <div id="chart"></div>
    {{chart}} <--failed attempt
  </div>
...

JavaScript

<script>
import ApexCharts from 'apexcharts'
export default {
  // name: 'HelloWorld',
  props: {//////////this is how i use global variable with vue.js///////////////
    width:{           type: String, default: function(){return('width:')}},
  }
}
var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'sales',
    data: [30,40,45,50,49,60,70,91,125]
  }],
  xaxis: {
    categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
  }
}

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

</script>

CSS

<style>
  @import '../assets/style/sec.css';
#chart {
  max-width: 650px;
  margin: 35px auto;
}

</style>

i tried using the vue.js global variable by turning "var option = ..." into "option:...", but it only gave me an error.

im pretty sure its supossed to show in the div with the "#chart" id

any helpand or advice is greatly appreciated, thank you.

  • javascript
  • vue.js
  • charts
  • apexcharts
Share Improve this question edited Oct 31, 2018 at 9:35 Dimanoid 7,3197 gold badges47 silver badges60 bronze badges asked Aug 1, 2018 at 18:54 Samuel chevarieSamuel chevarie 1913 gold badges5 silver badges13 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

EDIT: This answer was written when vue-apexcharts wrapper was not released. If you're looking for a better example on Vue integration with ApexCharts, check out https://github./apexcharts/vue-apexcharts

ApexCharts documentation currently doesn't have an example on how to use it with Vue/React, therefore I will try to provide a simple demo to use ApexCharts in Vue.js.

Here is the HTML Part

<div id="app">
    <div id="chart" ref="barchart"></div>
</div>

and here is the JS part

new Vue({
  el: '#app',
  mounted: function() {
    const chart = new ApexCharts(this.$refs.barchart, {
      chart: {
        type: 'bar',
        height: 400
      },
      series: [{
        name: 'sales',
        data: [30,40,45,50,49,60,70,91,125]
      }],
      xaxis: {
        categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999]
      }
    })

    chart.render();

  }
});

ApexCharts just require a reference to the DOM element, whether it is in Vue/React to render the chart on the screen. In the above code, I have referenced the DOM element via this.$refs.

Here is the codepen link for the example I gave above

本文标签： javascriptApexcharts bar chart not appearing in Vuejs projectStack Overflow

版权声明：本文标题：javascript - Apexcharts bar chart not appearing in Vue.js project - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744033189a2521884.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。