使用vue调整图表大小

Posted 2023-01-07

我想知道如何为图表设置尺寸。

我使用vue-chartjs，但看不到任何选择。

我只是图表组件中有此代码

<script>
    import  Line, mixins  from 'vue-chartjs'
    const  reactiveProp  = mixins;

    export default 
        name: 'line_chart',
        extends: Line,
        mixins: [reactiveProp],
        props: ['options'],
        mounted () 
            this.renderChart(this.chartData, this.options);
        
    
</script>

以及渲染组件脚本中的此代码

            fillData () 
                this.data_collection = 
                    labels: [0, 25, 50, 100],
                    datasets: [
                        
                            label: 'Blue',
                            backgroundColor: '#147aff',
                            fill: false ,
                            borderColor: '#147aff',
                            data: [0, 50, 100, 0],
                        ,
                    ]
                ;
                this.chart_options = 
                    responsive: true,
                
            ,

答案

以下列方式：

<elemento :styles="myStyles"></elemento>
<script>
export default: 
computed: 
    myStyles () 
        return height: '99px'
    
  

</script>

示例：https://jsfiddle.net/hamiltongabriel/7s40paog/6/