Google visualization 如何强制批注始终显示在列上方？_Google Visualization

Google visualization 如何强制批注始终显示在列上方？

google-visualization

Google visualization 如何强制批注始终显示在列上方？,google-visualization,Google Visualization,我希望列上方的注释始终位于列上方。我将annotations.alwaysOutside设置为true，但每当一列到达图表的顶部时，它都会将注释放置在该列中。如果您在JSFIDLE上运行代码，您就会明白我的意思那么，如何强制注释始终显示在列的上方呢 google.charts.load（“当前”{ 软件包：['corechart'] }); google.charts.setOnLoadCallback（drawChart）；函数绘图图（）{ var data=google.visual

我希望列上方的注释始终位于列上方。我将annotations.alwaysOutside设置为true，但每当一列到达图表的顶部时，它都会将注释放置在该列中。如果您在JSFIDLE上运行代码，您就会明白我的意思

那么，如何强制注释始终显示在列的上方呢


google.charts.load（“当前”{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“法力消耗”，“牌”]，
["0", 1],
["1", 2],
["2", 3],
["3", 4],
["4", 4],
["5", 3],
["6", 2],
["7+", 1],
]);
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”，
}, ]);
变量选项={
标题：“卡牌/法力消耗”，
宽度：'750'，
高度：'375'，
背景颜色：“FFF”，
EnableInteractive:false，
酒吧：{
群组宽度：“90%”
},
图例：{
位置：“无”
},
注释：{
总是这样：是的，
茎：{
颜色：“透明”
},
文本样式：{
fontName:“Lato”，
字体大小：18.75，
黑体字：对，
斜体：错，
auraColor:'透明'，
颜色：“000”
}
},
图表区：{
背景颜色：“FFF”
},
titleTextStyle：{
颜色：“000”，
fontName:“拉托”，
尺寸：25，
黑体字：对，
斜体：假
},
言辞：{
网格线：{
颜色：“透明”
},
text位置：“无”
},
哈克斯：{
文本样式：{
颜色：“000”，
fontName:“拉托”，
字体大小：18.75，
黑体字：对，
斜体：假
}
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}

设置

我还要补充一点

chartArea: {
        width: '95%',
}

完整代码：

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 2],
      ["2", 3],
      ["3", 4],
      ["4", 4],
      ["5", 3],
      ["6", 2],
      ["7+", 1],
    ]);

    var maxV = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
            if(data.getValue(i, 1) > maxV) {
                maxV = data.getValue(i, 1);
        }
    }
    maxV++;

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);

    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#FFF",
      enableInteractivity: false,
      bar: {
        groupWidth: "90%"
      },
      legend: {
        position: "none"
      },
      annotations: {
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          bold: true,
          italic: false,
          auraColor: 'transparent',
          color: "#000"
        }
      },
      chartArea: {
        width: '95%',
        backgroundColor: "#FFF"
      },
      titleTextStyle: {
        color: "#000",
        fontName: "Lato",
        fontSize: 25,
        bold: true,
        italic: false
      },
      vAxis: {
        viewWindow:{
            max:maxV,
        },
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      hAxis: {
        textStyle: {
          color: "#000",
          fontName: "Lato",
          fontSize: 18.75,
          bold: true,
          italic: false
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>


google.charts.load（“当前”{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“法力消耗”，“牌”]，
["0", 1],
["1", 2],
["2", 3],
["3", 4],
["4", 4],
["5", 3],
["6", 2],
["7+", 1],
]);
var-maxV=0；
对于（var i=0；imaxV）{
maxV=data.getValue（i，1）；
}
}
maxV++；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”，
}, ]);
变量选项={
标题：“卡牌/法力消耗”，
宽度：'750'，
高度：'375'，
背景颜色：“FFF”，
EnableInteractive:false，
酒吧：{
群组宽度：“90%”
},
图例：{
位置：“无”
},
注释：{
总是这样：是的，
茎：{
颜色：“透明”
},
文本样式：{
fontName:“Lato”，
字体大小：18.75，
黑体字：对，
斜体：错，
auraColor:'透明'，
颜色：“000”
}
},
图表区：{
宽度：“95%”，
背景颜色：“FFF”
},
titleTextStyle：{
颜色：“000”，
fontName:“拉托”，
尺寸：25，
黑体字：对，
斜体：假
},
言辞：{
视图窗口：{
马克斯：马克斯，
},
网格线：{
颜色：“透明”
},
text位置：“无”
},
哈克斯：{
文本样式：{
颜色：“000”，
fontName:“拉托”，
字体大小：18.75，
黑体字：对，
斜体：假
}
}
};
var chart=new google.visualization.ColumnChart（document.getElementById（“ColumnChart_values”）；
图表绘制（视图、选项）；
}

设置

我还要补充一点

chartArea: {
        width: '95%',
}

完整代码：

<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load("current", {
    packages: ['corechart']
  });
  google.charts.setOnLoadCallback(drawChart);

  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ["Mana Cost", "Cards"],
      ["0", 1],
      ["1", 2],
      ["2", 3],
      ["3", 4],
      ["4", 4],
      ["5", 3],
      ["6", 2],
      ["7+", 1],
    ]);

    var maxV = 0;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
            if(data.getValue(i, 1) > maxV) {
                maxV = data.getValue(i, 1);
        }
    }
    maxV++;

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation",
    }, ]);

    var options = {
      title: "Cards/Mana Cost",
      width: '750',
      height: '375',
      backgroundColor: "#FFF",
      enableInteractivity: false,
      bar: {
        groupWidth: "90%"
      },
      legend: {
        position: "none"
      },
      annotations: {
        alwaysOutside: true,
        stem: {
          color: "transparent"
        },
        textStyle: {
          fontName: 'Lato',
          fontSize: 18.75,
          bold: true,
          italic: false,
          auraColor: 'transparent',
          color: "#000"
        }
      },
      chartArea: {
        width: '95%',
        backgroundColor: "#FFF"
      },
      titleTextStyle: {
        color: "#000",
        fontName: "Lato",
        fontSize: 25,
        bold: true,
        italic: false
      },
      vAxis: {
        viewWindow:{
            max:maxV,
        },
        gridlines: {
          color: 'transparent'
        },
        textPosition: "none"
      },
      hAxis: {
        textStyle: {
          color: "#000",
          fontName: "Lato",
          fontSize: 18.75,
          bold: true,
          italic: false
        }
      }
    };
    var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
    chart.draw(view, options);
  }

</script>
<div id="columnchart_values" style="width: 900px; height: 300px;"></div>


google.charts.load（“当前”{
软件包：['corechart']
});
google.charts.setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“法力消耗”，“牌”]，
["0", 1],
["1", 2],
["2", 3],
["3", 4],
["4", 4],
["5", 3],
["6", 2],
["7+", 1],
]);
var-maxV=0；
对于（var i=0；imaxV）{
maxV=data.getValue（i，1）；
}
}
maxV++；
var view=newgoogle.visualization.DataView（数据）；
view.setColumns（[0,1,1{
计算：“字符串化”，
资料来源专栏：1，
键入：“字符串”，
角色：“注释”，
}, ]);
变量选项={
标题：“卡牌/法力消耗”，
宽度：'750'，
高度：'375'，
背景颜色：“FFF”，
EnableInteractive:false，
酒吧：{
群组宽度：“90%”
},
图例：{
位置：“无”
},
注释：{
总是这样：是的，
茎：{
颜色：“透明”
},
文本样式：{
fontName:“Lato”，
字体大小：18.75，
黑体字：对，
斜体：错，
auraColor:'透明'，
颜色：“000”
}
},
图表区：{
宽度：“95%”，
背景颜色：“FFF”
},
titleTextStyle：{
颜色：“000”，
fontName:“拉托”，
尺寸：25，
黑体字：对，
斜体：假
},
言辞：{
视图窗口：{
马克斯：马克斯，
},
网格