Vue JS Google 图表注释

Question

我想使用 Vue-Google-charts 创建一个条形图，其中值显示在条形图上。如果我阅读 google 图表文档，我应该使用注释。

如何在Vue-Google-Chart组件代码中添加注解？

这是我当前的组件代码：

Vue.component('graphiquecolonne', {
template: '<GChart type="BarChart" :data="chartData2" :options="chartOptions2"/>',
props: ['datag2', 'titre'],
data() {
   return {
     chartData2: null
   }
},
computed:{
  chartOptions2(){
    return {
        title: this.titre,   
        height: 500,
        pointSize: 10,
      }
  }
},
watch: {
   datag2: {
     immediate: false,
     handler(newValue) {
        this.chartData2 = newValue;
        }
   }
}
});

我的数据位于“datag2”对象 (prop) 中，具有当前标签和值。

提前致谢！

Answer 1

您必须在数据的列标题中提供列角色 table。

如果以下是您的列标题...

['datag2', 'titre']

然后你会添加注释列角色，在应该有注释的数据列之后...

['datag2', 'titre', {role: 'annotation', type: 'string'}]

然后在数据行中提供注释值...

[
  ['category 1', 10, '10'],
  ['category 2', 20, '20'],
  ['category 3', 30, '30'],
]

Vue JS Google 图表注释

Vue JS Google chart annotation

charts

google-visualization

vue.js