javascript - Google Charts 类别过滤器 - 隐藏 html 标签或将元素转换为链接

Question

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

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

Screenshot of the filter

Answer 1

从 CategoryFilter 中删除 html，
对于数据表列中的每个单元格，
使用值属性 (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>

---

注意:不确定如何让实际链接显示在过滤器中，
但这可能会干扰实际选择一个值