Vue chartjs Vue chartjs将我的响应图表渲染得太高，无法显示我的窗口

我用chart.JS创建了一个简单的响应HTML+JS图表，效果很好。我决定在Vue CLI中执行此操作，因此尝试将其切换到Vue chartjs，但同一图表的显示高度总是比我的窗口高出33%，因此显示垂直滚动条（宽度很好）。我使用一个示例平凡图重新创建了问题，我使用该图渲染：

import {Line} from 'vue-chartjs'
export default {
  extends: Line,
  mounted () {
    this.renderChart(data, options)
  } 
} 

注意，

数据

非常简单，

选项

是

{}

如果我在Vue组件中使用chart.js，而不是Vue chartjs，那么它可以正常工作。也就是说，我所做的只是从我的组件中删除上面的代码，并将其更改为以下代码，然后它会呈现良好的效果，就像我的示例HTML+chart.js版本一样

import Chart from 'chart.js'
function mount(el) {
    return new Chart(
        document.getElementById(el).getContext('2d'), {
        type: 'line',
        data: data,
        options: options,
    })
}

export default {
    template: '<canvas id="chart"></canvas>',
    mounted () {
        self.chart = mount('chart')
    }
}

从“Chart.js”导入图表
功能安装（el）{
返回新图表(
document.getElementById（el）.getContext（'2d'）{
键入：“行”，
数据：数据，
选项：选项，
})
}
导出默认值{
模板：“”，
挂载（）{
self.chart=挂载（'图表'）
}
}

当然，我使用的是默认的

responsive:true

和

maintaintAspectratio:false

，并且没有任何明确的CSS或大小设置

为什么在使用vue chartjs时无法使图表正确呈现高度？我正在使用vue chartjs版本3.4.2，但也尝试过一些版本。我查看了github bug追踪器，但没有发现任何相关信息。

更新：

您应该将

选项作为道具或本地传递。但需要补充的是：


回答：对
MaintaintAspectRatio:false

所需的高度以及您所说的选项。以下是它对我的作用：

选项：

options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }

<bin-graph-weight :chart-data="datacollection" :styles="myStyles" :options="datacollection.options"/>

import { Line, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
    // this.chartData is created in the mixin.
        this.renderChart(this.chartData, this.options)
    },
    // If you want to pass options please create a local options object
    watch: {
        chartData () {
            this.$data._chart.update()
        }
    }
}


在模板中：

options: {
                    scales: {
                        yAxes: [
                            {
                                ticks: {
                                    beginAtZero: true
                                }
                            }]
                    },
                    responsive: true,
                    maintainAspectRatio: false
                }

<bin-graph-weight :chart-data="datacollection" :styles="myStyles" :options="datacollection.options"/>

import { Line, mixins } from 'vue-chartjs'

const { reactiveProp } = mixins

export default {
    extends: Line,
    mixins: [reactiveProp],
    props: ['options'],
    mounted () {
    // this.chartData is created in the mixin.
        this.renderChart(this.chartData, this.options)
    },
    // If you want to pass options please create a local options object
    watch: {
        chartData () {
            this.$data._chart.update()
        }
    }
}


还存在高度溢出和响应性问题，通过引入占用100%空间的flex父容器进行修复。设置响应和比率选项（与签出相关）后，使用以下css填充100%的父对象（其中
图表
是vue chartjs组件。基本上需要确保图表的父对象始终填充其自身父对象的100%：

vue模板

<v-container class="chart-container">
  <TheChart :chartdata="chartData" :options="chartOptions" />
</v-container>

有了响应能力，图表会以承诺的形式重新出现，并且实际设置了两次。
通过Vue.js中的监视程序，您可以在每次更改图表数据时重新渲染

图表组件：

<script>
import { Bar, mixins } from 'vue-chartjs';

const { reactiveProp } = mixins;

export default {
  extends: Bar,
  mixins: [reactiveProp],
  props: ['chartOptions'],
  mounted() {
    this.renderChart(this.chartData, this.chartOptions);
  },
  watch: {
    chartData() {
      this.renderChart(this.chartData, this.chartOptions);
    },
  },
};
</script>


从“vue chartjs”导入{Bar，mixins}；
const{reactiveProp}=mixins；
导出默认值{
延伸：酒吧，
mixins:[reactiveProp]，
道具：['chartOptions']，
安装的（）{
this.renderChart（this.chartData，this.chartOptions）；
},
观察：{
图表数据（）{
this.renderChart（this.chartData，this.chartOptions）；
},
},
};

与动态样式一起使用

图表属性：

<template>
  <div style="height:300px;">
    <bar-chart :styles="myStyles" :chart-data="dataCollection"
      :chart-options="chartOptions"></bar-chart>
  </div>
</template>

<script>
import BarChart from './ChartBar.vue';

export default {
  components: {
    BarChart,
  },
  props: ['dataCollection'],
  data() {
    return {
      myStyles: {
        height: '300px',
        width: '100%',
        position: 'relative',
      },
      chartOptions: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true,
            },
            gridLines: {
              display: true,
            },
          }],
          xAxes: [{
            ticks: {
              beginAtZero: true,
            },
            gridLines: {
              display: false,
            },
          }],
        },
        legend: {
          display: true,
        },
        tooltips: {
          enabled: true,
          mode: 'single',
          callbacks: {
            label(tooltipItems, data) {
              const { datasetIndex, index } = tooltipItems;
              const value = data.datasets[datasetIndex].data[index];
              if (parseInt(value, 10) > 999) {
                return ` ${value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
              }
              return ` ${value}`;
            },
          },
        },
        responsive: true,
        maintainAspectRatio: false,
        height: 300,
      },
    };
  },
};
</script>

<style lang="scss" scoped>

</style>


从“/ChartBar.vue”导入条形图；
导出默认值{
组成部分：{
柱状图，
},
道具：[“数据收集”]，
数据（）{
返回{
我的风格：{
高度：“300px”，
宽度：“100%”，
位置：'相对'，
},
图表选项：{
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的，
},
网格线：{
显示：对，
},
}],
xAxes：[{
滴答声：{
贝吉纳泽罗：是的，
},
网格线：{
显示：假，
},
}],
},
图例：{
显示：对，
},
工具提示：{
启用：对，
模式：“单一”，
回调：{
标签（工具提示项、数据）{
const{datasetIndex，index}=工具提示项；
常量值=数据。数据集[datasetIndex]。数据[index]；
if（parseInt（值，10）>999）{
返回`${value.toString（）.replace（/\B（？=（\d{3}）+（？！\d））/g'，'，'）}`；
}
返回`${value}`；
},
},
},
回答：是的，
MaintaintAspectRatio:false，
身高：300，
},
};
},
};
将响应选项和比率选项设置为什么？请@bulletmark选择我的答案（如果对您有效，请选择正确的答案；）这对我有帮助：
响应：true、
和
维护已传递选项中的aspectratio:false
将其与已传递的
：style
一起修复风格是必需的。这是记录在上面的代码！确保设置：styles.please@bulletmark选择正确的答案，如果它对您有效；）选项不正确