在Google柱形图中隐藏列及其注释值

Question

我有一个列谷歌图表，我每个月有四个酒吧。在视图集中，为了将值放在每个条形的顶部，我为每个条添加了一个注释，如下所示：

view.setColumns([0, 1,
            {
              id:"col1",
              calc: "stringify",
              sourceColumn: 1,
              type: "string",
              role: "annotation" }, 2,
            {
              id:"col1",
              calc: "stringify",
              sourceColumn: 2,
              type: "string",
              role: "annotation"  
            }, 3,
            {
              id:"col1",
              calc: "stringify",
              sourceColumn: 3,
              type: "string",
              role: "annotation"  
            }, 4,
            {
              id:"col1",
              calc: "stringify",
              sourceColumn: 4,
              type: "string",
              role: "annotation"  
            }
        ]);

我还为每列添加了四个按钮来隐藏它们。当我使用函数hideColumns时，它接收索引数组以标识我想隐藏的列。但是，当我单击按钮隐藏列时，其注释值将保持显示在图表上并转到邻居列。如何避免这种情况同时隐藏列和注释？我尝试将id分配给object列（注释）并在hideColumns函数中使用它，但该函数只接收索引数组。

这是隐藏列号1的代码：

var hideAtv = document.getElementById("hideAtividades");
    hideAtv.onclick = function()
    {
       view.hideColumns([1]); 

       chart.draw(view, options);
    }

提前致谢

Answer 1

注释列应始终遵循数据表中的系列列...

所以如果你想隐藏第1列，也要隐藏第2列......

var hideAtv = document.getElementById("hideAtividades");
hideAtv.onclick = function()
{
   view.hideColumns([1, 2]); 

   chart.draw(view, options);
}

编辑

使用DataView.hideColumns时，列引用用于数据表

所以它不能处理隐藏的计算列，例如注释列在这里

因此，不使用hideColumns，而是使用最初使用的setColumns，
只是没有要隐藏的列

您可以使用DataView.getViewColumns

返回列定义

然后检查列是否应该可见......

  if (columnDef.hasOwnProperty('sourceColumn')) {
    if (columnDef.sourceColumn !== 1) {
      viewColumns.push(columnDef);
    }
  } else if (columnDef !== 1) {
    viewColumns.push(columnDef);
  }
  view.setColumns(viewColumns);

参见下面的工作片段，这里使用相同的功能隐藏列，
基于按钮的值属性

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2', 'y3'],
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ]);

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

  var options = {
    chartArea: {
      top: 12,
      left: 32,
      bottom: 60,
      right: 8,
      height: '100%',
      width: '100%'
    },
    height: 496,
    legend: {
      position: 'bottom'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(view, options);

  document.getElementById('hideSeries1').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries2').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries3').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries4').addEventListener('click', hideColumn, false);
  document.getElementById('resetSeries').addEventListener('click', resetSeries, false);

  function hideColumn(e) {
    var hideColumn = parseInt(e.target.value);
    var viewColumns = [];

    view.getViewColumns().forEach(function (columnDef) {
      if (columnDef.hasOwnProperty('sourceColumn')) {
        if (columnDef.sourceColumn !== hideColumn) {
          viewColumns.push(columnDef);
        }
      } else if (columnDef !== hideColumn) {
        viewColumns.push(columnDef);
      }
    });

    view.setColumns(viewColumns);
    chart.draw(view, options);
  }

  function resetSeries(e) {
    view.setColumns(columns);
    chart.draw(view, options);
  }
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

<button id="hideSeries1" value="1">Hide Series 1</button>
<button id="hideSeries2" value="2">Hide Series 2</button>
<button id="hideSeries3" value="3">Hide Series 3</button>
<button id="hideSeries4" value="4">Hide Series 4</button>
<button id="resetSeries">Reset All Series</button>

＆＃13;

＆＃13;

＆＃13;

注意：上面的代码片段通过使用...

隐藏了以前隐藏的按钮

view.getViewColumns().forEach

一次只允许隐藏一列，请使用...

columns.forEach

请参阅后面的以下片段...

＆＃13;

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'y0', 'y1', 'y2', 'y3'],
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ]);

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

  var options = {
    chartArea: {
      top: 12,
      left: 32,
      bottom: 60,
      right: 8,
      height: '100%',
      width: '100%'
    },
    height: 496,
    legend: {
      position: 'bottom'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.ColumnChart(container);
  chart.draw(view, options);

  document.getElementById('hideSeries1').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries2').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries3').addEventListener('click', hideColumn, false);
  document.getElementById('hideSeries4').addEventListener('click', hideColumn, false);
  document.getElementById('resetSeries').addEventListener('click', resetSeries, false);

  function hideColumn(e) {
    var hideColumn = parseInt(e.target.value);
    var viewColumns = [];

    columns.forEach(function (columnDef) {
      if (columnDef.hasOwnProperty('sourceColumn')) {
        if (columnDef.sourceColumn !== hideColumn) {
          viewColumns.push(columnDef);
        }
      } else if (columnDef !== hideColumn) {
        viewColumns.push(columnDef);
      }
    });

    view.setColumns(viewColumns);
    chart.draw(view, options);
  }

  function resetSeries(e) {
    view.setColumns(columns);
    chart.draw(view, options);
  }
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

<button id="hideSeries1" value="1">Hide Series 1</button>
<button id="hideSeries2" value="2">Hide Series 2</button>
<button id="hideSeries3" value="3">Hide Series 3</button>
<button id="hideSeries4" value="4">Hide Series 4</button>
<button id="resetSeries">Reset All Series</button>

＆＃13;

＆＃13;

＆＃13;