谷歌柱形图自定义图例
Posted
技术标签:
【中文标题】谷歌柱形图自定义图例【英文标题】:Google Column chart customizing legend 【发布时间】:2016-12-22 16:01:45 【问题描述】:我想自定义我的柱形图 API 如下
1) 当我单击图例时,与之关联的数据集应返回 null 并以禁用颜色显示图例。我的代码如下。
function drawVisualization()
// Create and populate the data table.
var chart_div = document.getElementById('visualization2');
var data2 = google.visualization.arrayToDataTable([["Sections","Client Scored", role: "style" ,"Client Confidence", role: "style" ,"Average Mark", role: "style" ,"Average Confidence", role: "style" ],["Set 1",90,"opacity: 1",95,"opacity: 0.5",78,"opacity: 1",69,"opacity: 0.5"],["Set 2",65,"opacity: 1",73,"opacity: 0.5",99,"opacity: 1",99,"opacity: 0.5"]]);
var options =
title:"Understanding",
width:'100%', height:600,seriesType: "bars"
,series:1: type: "line",pointSize: 10,lineWidth :0,3: type: "line",pointSize: 10,lineWidth :0
,colors: ['#fafe14','#fafe14','#05afed','#05afed']
,vAxis: title: "%Score",format: '##', minValue: '1', maxValue: '8',
hAxis: title: "",slantedText: true,slantedTextAngle:60, maxTextLines: 5, maxAlternation: 10 ,
chartArea: height: '60%',top:10
;
var chart = new google.visualization.ColumnChart(chart_div);
chart.draw(data2, options);
为此,我尝试了 hideColumns 功能并且它有效,但问题是图例也会随着数据集淡出,如果我删除第二列,第三列将变为第二列,4 将变为 3 和5 会变成 4。
2) 我的第二个问题是第 1 列和第 3 列是线宽为零的行,如下所示。
有什么方法可以将它移动到第一个栏的正中间,如下所示
【问题讨论】:
【参考方案1】:如果我正确理解了您问题的第一部分,那么您正在尝试隐藏一列而不将其从您的 DataTable 中删除。
要让 DataTable 中的列不显示在从中绘制的图表中,您可以将列的角色更改为不显示在图表上的内容。
例如,一个列的 annotationText 角色适用于它之前的 annotation 列,但如果它之前没有 annotation 列,则 annotationText 列将被忽略。
所以如果你想隐藏第 2 列,下面的代码 sn-p 会这样做:
data_table.setColumnProperty(2,'role','annotationText');
如果您想再次显示该列,只需将角色更改回数据
data_table.setColumnProperty(2,'role','data');
【讨论】:
以上是关于谷歌柱形图自定义图例的主要内容,如果未能解决你的问题,请参考以下文章