如何使用“vue-google-charts”（来自 devstark）显示图表的标题和副标题（在顶部或底部）？

Question

使用 https://www.npmjs.com/package/vue-google-charts

它根本不显示标题。是否可以将其显示在图表顶部或下方？

尝试使用选项“标题”给出“display=true”...以将其格式化为“”和“”

<template>
    <div class="container">
        <GChart     
            :settings="{packages: ['bar']}"    
            type="LineChart"
            :data="chartData"
            :options="chartOptions"
            style="width: 900px; height: 500px;"
        />


        <GChart
            type="ColumnChart"
            :data="chartData"
            :options="chartOptions"
        />
    </div>
</template>

<script>
    import VueGoogleCharts from 'vue-google-charts'
    export default {
        data () {
            return {
                // Array will be automatically processed with visualization.arrayToDataTable function
                chartData: [
                ['Year', 'Sales', 'Expenses', 'Profit'],
                ['2014', 1000, 400, 200],
                ['2015', 1170, 460, 250],
                ['2016', 660, 1120, 300],
                ['2017', 1030, 540, 350],
                ['2018', 2000, 1, 1]
                ],
                chartOptions:{
                    chart: {
                    title: 'Company Performance',
                    subtitle: 'Sales, Expenses, and Profit: 2014-2017',
                    }
                }
            }
        }
    }

</script>

我希望显示图表的标题“公司业绩”和副标题“销售、费用和利润：2014-2017 年”（图表上方或下方）。

Answer 1

更改您的代码如下： 图表选项：{ 标题：“公司业绩”， 副标题：“销售额、费用和利润：2014-2017 年” }