使用vue调整图表大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue调整图表大小相关的知识,希望对你有一定的参考价值。

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

我使用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/

以上是关于使用vue调整图表大小的主要内容,如果未能解决你的问题,请参考以下文章