Question

我正在使用Vue-chartjs并创建了两个vue组件，每个组件分别用于条形图和折线图。我的数据源是SharePoint。我可以看到图表，但是问题是图表没有响应。它们被放大并彼此重叠。

我正在将道具从父级传递到每个组件，包括选项，但无济于事。

这是我的vue实例代码和条形图组件的摘录

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
    ChartConfig: {
      labels: [],
      datasets: [
        {
          data: [],
          backgroundColor: '#3498db',
          borderColor: 'rgba(136,136,136,0.5)',
          label: "2013"
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      title: {
        display: true,
        text: 'Chart.js Line Chart'
      },
      tooltips: {
        mode: 'index',
        intersect: false,
      },
      hover: {
        mode: 'nearest',
        intersect: true
      },
      scales: {
        xAxes: [{
          display: true,
          categoryPercentage: 0.5,
          scaleLabel: {
            display: true,
            labelString: 'Month'
          }
        }],
        yAxes: [{
          display: true,
          scaleLabel: {
            display: true,
            labelString: 'Value'
          }
        }]
      }
    },

条形图组件

Vue.component('my-bar-chart', {
    extends: VueChartJs.Bar,
    props: ['barData', 'chartOptions'],
    mounted: function () {
        this.renderChart(this.barData, this.chartOptions);
    }
})

html

<my-bar-chart :bar-data="ChartConfig" :chart-options="options"></my-bar-chart>

我能够在此pen

中重复该问题

Vue-Chart.js无法一致呈现且无响应

0 个答案: