Google柱形图自定义图例

Question

我想自定义我的柱形图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列是线宽为零的线,如下所示.

有没有办法将它移动到第一个栏的正中间,如下所示

Answer 1

如果我正确理解您问题的第一部分，您将尝试隐藏一列而不将其从数据表中删除。

要使 DataTable 中的列不显示在从其绘制的图表中，您可以将该列的角色更改为不显示在图表上的内容。

例如，列的annotationText 角色适用于其之前的注释列，但如果其之前没有注释列，则annotationText 列将被忽略。

因此，如果您想隐藏第 2 列，可以使用以下代码片段：

data_table.setColumnProperty(2,'role','annotationText');

如果您想再次显示该列，只需将角色更改回数据即可

data_table.setColumnProperty(2,'role','data');