Как отобразить заголовок и подзаголовок диаграммы (вверху или внизу) с помощью «vue-google-charts» (из devstark)?

#javascript #vue.js #linechart

#javascript #vue.js #линейная диаграмма

Вопрос:

Используя https://www.npmjs.com/package/vue-google-charts

Это вообще не показывает заголовок. Есть ли возможность отобразить это вверху или под диаграммой?

попытался указать «display= true» с параметром «title» … чтобы отформатировать его в «и»»

 <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» отображались на диаграмме (над диаграммой или под ней).