谷歌图表，隐藏的列的显示，但保留基础资料，用于

Question

在下面的JSON：

 var data = new google.visualization.DataTable(
      { 
      cols: [{id: 'Option1', label: 'Manufacturer', type: 'string'}, 
        {id: 'Option2', label: 'Region', type: 'string'}, 
        {id: 'Option3', label: 'Option3', type: 'number'}, 
        {id: 'Option4', label: 'Option4', type: 'number'}, 
        {id: 'Option5', label: 'Option5', type: 'number'}, 
        {id: 'Option6', label: 'Option6', type: 'number'}, 
        {id: 'Option7', label: 'Option7', type: 'number'}, 
        {id: 'Option8', label: 'Option8', type: 'number'}], 


      rows: [{c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'BMW'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'BMW'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'BMW'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'Citroen'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, 
        {c:[{v: 'Citroen'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]} 
        ] 
      }, 
      0.6 
     ) 

我的图形“将”与针对每个数据的7条行显示的厂家。

我希望能够使用从属控件过滤数据，以便仅查看每个区域（第1列）中的行。

由于区域列不是整数，所以无法显示，因此在当前时间该图不绘制。

因此，我想'隐藏'区域列，以便它不显示为条形，但可用于从属控件。

任何人都可以帮忙，因为我找不到任何方法来做到这一点？我不认为hideColumns方法可以工作，因为这会从数据对象中删除列，并且在依赖控件无法看到它之前。

Answer 1

解决方法是使用'视图'。

 // Create a bar chart, passing some options 
     barChart = new google.visualization.ChartWrapper({ 
      'chartType': 'BarChart', 
      'containerId': 'chart_div', 
      'options': { 
      'width': '100%', 
      'height': '120%', 
      'vAxis': {title: "Branch"}, 
      'hAxis': {title: "Cups"}, 
      'fontSize': 14, 
      'showRowNumber' : true, 
      }, 
      'view': {'columns': [0,2,3,4,5,6,7]} 
     }); 

希望这会帮助其他人有同样的问题。

Answer 2

您可以通过执行使用数据视图直接以及与上面的代码下面

function hideColumns (chart, data, options, colToHide) { 
     dataview = new google.visualization.DataView(data); 
     dataview.hideColumns(colToHide); 
     // you can also use dataview.setColumns([1,2]) to show only selected columns and hide the rest 
     chart.draw(dataview, options) 
    };