Question

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

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

Screenshot of the filter

Answer 1

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

请参阅以下工作代码段...

＆＃13;

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']
});

＆＃13;

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

＆＃13;

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

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

1 个答案: