如何将 CSS 应用到 Google 类别过滤器

问题描述 投票：0回答：1

我一直在尝试自定义 CSS 并将其应用到 Google 类别过滤器

我的过滤器代码

var reg_filter = new google.visualization.ControlWrapper({      
        controlType: 'CategoryFilter',
        containerId: 'filter_div',
        dataTable: x_columnTable,
        options: {
          filterColumnLabel: 'State',
          ui: {
            labelStacking: 'horizontal',
            allowTyping: false,
            allowMultiple: true,
            //selectedValuesLayout:'belowWrapping'
            }
          },
          // Define an initial state, i.e. a set of metrics to be initially selected.
          state: initState
    });

我的标签和下拉 CSS 

    .label_{
      font-size:18px;
      font-weight:normal;
      font-family:"Condensed-Regular";  
      letter-spacing: -0.2px;
      color: #005596;
    }
    .filter_cont{
     display:flex;
     width:300px;
     height:50px;
     margin:auto;    
    }

.chart_container1{
  display:flex;
  float:left;
  width:600px;
  height:500px;
  margin:auto;    
}

<label class="label_"> Select </label> <br> 
<div id="filter" class="filter_cont"></div>     
<div id="chart_pdiv" class="chart_container1"></div>

我有三个相关问题

  1. 如何将 CSS 应用于标签？
  2. 如何将 CSS 应用于下拉菜单 - 更改宽度、高度和字体类型？
  3. 如何隐藏 selectedValuesLayout？

我浏览了 Google Chart 文档，其中提到使用 ui.CssClass，但是我如何在这里实现它？

我想让过滤器允许多个值为 true，同时我想隐藏 selectedValuesLayout，因为我的类别过滤器将有超过 10 个值

下面是我想隐藏的部分

enter image description here

如果有人帮助制作工作片段，那就太好了。

html css google-visualization
1个回答
0
投票

要将 CSS 应用于标签，您可以使用 ui.label 选项通过 CSS 类自定义标签的外观，

对于下拉宽度、高度和字体类型，使用针对生成的 dom 元素的外部 css，

对于 selectedValuesLayout ，由于没有直接通过 google API 禁用它的功能，您也可以定位创建的元素并将其隐藏

这是修复的一个片段

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawDashboard);

      function drawDashboard() {
        var data = google.visualization.arrayToDataTable([
          ['State', 'Population'],
          ['California', 38332521],
          ['Texas', 26448193],
          ['New York', 19651127],
          ['Florida', 19552860],
          ['Illinois', 12882135],
          ['Pennsylvania', 12773801]
        ]);

        var reg_filter = new google.visualization.ControlWrapper({
          controlType: 'CategoryFilter',
          containerId: 'filter_div',
          options: {
            filterColumnLabel: 'State',
            ui: {
              labelStacking: 'horizontal',
              allowTyping: false,
              allowMultiple: true,
              cssClass: 'custom-category-filter'
            }
          }
        });

        var chart = new google.visualization.ChartWrapper({
          chartType: 'PieChart',
          containerId: 'chart_div',
          options: {
            width: 600,
            height: 400,
            legend: 'right'
          }
        });

        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));

        dashboard.bind(reg_filter, chart);
        dashboard.draw(data);
      }
    </script>

    <style>
      /* Style for the label */
      .label_ {
        font-size: 18px;
        font-weight: normal;
        font-family: "Condensed-Regular";
        letter-spacing: -0.2px;
        color: #005596;
      }

      /* Style for the dropdown */
      .custom-category-filter select {
        width: 200px;
        height: 30px;
        font-family: Arial, sans-serif;
        font-size: 16px;
      }

      /* Hide the selected values section */
      .custom-category-filter .goog-inline-block {
        display: none !important;
      }

      .chart_container1 {
        display: flex;
        float: left;
        width: 600px;
        height: 500px;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <label class="label_">Select</label> <br>
    <div id="dashboard_div">
      <div id="filter_div" class="filter_cont"></div>
      <div id="chart_div" class="chart_container1"></div>
    </div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.