Google图表类别过滤器-隐藏html标记或将元素转换为链接

Question

是否有人知道如何在类别过滤器中隐藏html标签或将其转换为html链接？ 我遇到以下问题：

在图表表的其中一列中，我提供了html链接。 我在ChartWrapper()设置属性allowHtml:true 。 在表格中，链接显示正确。 当我对该列进行过滤时，下拉列表将获取包括html在内的整个列的值。 不幸的是ControlWrapper()没有属性allowHtml。 这是过滤器的外观。

过滤器的屏幕截图

Answer 1

从CategoryFilter删除html，
对于数据表列中的每个单元格，
将value属性（ v:用于要在过滤器中显示的值，
以及链接的格式化值属性（ f: ：）

请参阅以下工作片段...

 google.charts.load('current', { callback: function () { var data = new google.visualization.DataTable({ cols: [ {label: 'Link', type: 'string'} ], rows: [ {c:[{v: 'Test 1', f: '<a href="https://www.google.com/">Test 1</a>'}]}, {c:[{v: 'Test 2', f: '<a href="https://www.google.com/">Test 2</a>'}]}, {c:[{v: 'Test 3', f: '<a href="https://www.google.com/">Test 3</a>'}]}, {c:[{v: 'Test 4', f: '<a href="https://www.google.com/">Test 4</a>'}]}, {c:[{v: 'Test 5', f: '<a href="https://www.google.com/">Test 5</a>'}]}, {c:[{v: 'Test 6', f: '<a href="https://www.google.com/">Test 6</a>'}]} ] }); var dashboard = new google.visualization.Dashboard( document.getElementById('dashboard') ); var control = new google.visualization.ControlWrapper({ controlType: 'CategoryFilter', containerId: 'control', options: { filterColumnIndex: 0, ui: { allowTyping: false, } } }); var chart = new google.visualization.ChartWrapper({ chartType: 'Table', containerId: 'table', options: { allowHtml: true } }); dashboard.bind(control, chart); dashboard.draw(data); }, packages: ['controls', 'table'] }); 

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

---

注意：不确定如何获取实际链接以显示在过滤器中，
但这可能会干扰实际选择值