javascript - 如何更改 Google 图表上类别过滤器中选定值的样式？

Question

如这张图所示

Google 图表上类别过滤器的选定值看起来很糟糕，

x 应位于值文本的右侧，并且应有一个背景颜色框让它看起来更好

如何设置它的样式？

可运行的代码片段

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

google.charts.setOnLoadCallback(drawRegionsMap);



function drawRegionsMap() {

  var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
  //all
  query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
  query1.send(drawDashboard);
}

function drawDashboard(response1) {

  var data1 = response1.getDataTable();

  //set year that<2000 to 2000
  for (i = 0; i < data1.getNumberOfRows(); i++) {

    var startdate = new Date(data1.getValue(i, 12));


    var y = startdate.getFullYear();



    if (y < 2000) {

      r = data1.getValue(i, 12);

      //console.log(i);

      startdate.setFullYear(2000);

      data1.setValue(i, 12, startdate);



    }

  }

  //set start date to previous row end date - groupByRowLabel

  for (var row = 1; row < data1.getNumberOfRows(); row++) {

    if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   

      if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
        data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
      }
    }
  }







  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([
    //index column 0
    {
      type: 'string',
      id: 'Country',
      calc: function(dt, row) {
        //return countryname statename - policies // USA New York - WEEE
        return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
      }
    },
    //index column 1

    {
      type: 'string',
      id: 'region',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 8)
      }
    }
    //index column 2
    , {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 11)
        var formatter = new google.visualization.DateFormat({
          pattern: "MMMM yyyy"
        });
        var startdate = formatter.formatValue(dt.getValue(row, 12));
        //var startdate = dt.getFormattedValue(row, 12)
        var comment = dt.getFormattedValue(row, 15)
        //colorValues.push(dt.getFormattedValue(row, 6))
        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      }
    },
    //style role
    {
      type: 'string',
      id: 'color',
      role: 'style',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 25)
      }
    },


    //index column 3,4 start-enddate
    12, 13,

  ]);



  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    //dataTable: 'data1',
    containerId: 'colormap1',
    options: {
      width: 870,
      height: 800,
      //colors: colorValues,

      timeline: {
        groupByRowLabel: true,
        rowLabelStyle: {
          fontSize: 14,
          width: 800,

        },
        showBarLabels: false
      },
      hAxis: {
        minValue: new Date(2010, 0, 0),
        maxValue: new Date(2017, 0, 0)
      },
      tooltip: {
        isHtml: true
      },
    }


  });


  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnIndex': '1',
      'ui': {
        'labelStacking': 'vertical',
        'caption': 'Choose a Region',
        'cssClass': 'filter',
        'selectedValuesLayout': 'aside',
        'allowTyping': false,
        'allowMultiple': true
      }
    }
  });


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




  // Establish dependencies, declaring that 'filter' drives 'pieChart',
  // so that the pie chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(namePicker, chart1);
  // Draw the dashboard.
  dashboard.draw(view1);


  google.visualization.events.addListener(chart1, 'ready', function() {
    var svgParent = colormap1.getElementsByTagName('svg')[0];

    svgParent.parentNode.style.top = '40px';

    Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
      if ((text.getAttribute('text-anchor') === 'end') &&
        (parseFloat(text.getAttribute('x')) < 200)) {
        text.setAttribute("x", "5");
        text.setAttribute("text-anchor", "start");
      }


      if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {

        var groupLabel = text.cloneNode(true);
        groupLabel.setAttribute('x', '850');
        groupLabel.innerHTML = '2017';
        groupLabel.setAttribute('y', '971.05');
        groupLabel.setAttribute('font-family', 'Arial');
        groupLabel.setAttribute('font-size', '13');
        svgParent.appendChild(groupLabel);



      }


    })



  })
  google.visualization.events.addListener(chart1, 'select', tableSelectHandler);


  function tableSelectHandler() {
    var selection = chart1.getChart().getSelection()[0];
    var chartDataView = chart1.getDataTable();
    var rowindex = chartDataView.getTableRowIndex(selection.row);
    var cnid = data1.getValue(rowindex, 0);
    var polid = data1.getValue(rowindex, 1);
    var strid = data1.getValue(rowindex, 2);
    //var sid = (strid) - 1;

    var statecode = data1.getValue(rowindex, 4);

    //if (selection.length > 0) {
    //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
    window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
    //}
  }
  google.visualization.events.addListener(namePicker, 'statechange', hidediv);

  function hidediv() {
    $(document).ready(function() {
      $("#:0.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
      $("#:4.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
    })
  }


}

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<div id="dashboard_div">

  <div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>

  <div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>

  <div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>


  <div id="filter_div"></div>
  <!--chart_div!-->
  <div id='colormap1' style="position:fixed;">

  </div>
</div>
</body>

</html>

Answer 1

为选项指定的类名 --> ui.cssClass
将被赋予类别过滤元素

使用提供给选项的类名，
设置过滤器元素的样式

检查过滤器创建的元素以查找您想要设置样式的类

// option
'cssClass': 'filter'

/* css */
.filter .google-visualization-controls-categoryfilter-selected li {
  background-color: #e65100;
  border: 1px solid #ff9800;
  color: #ffffff;
  padding: 6px;
}

.filter .goog-link-button {
  cursor: pointer;
  float: right;
  margin-left: 4px;
}

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

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

google.charts.setOnLoadCallback(drawRegionsMap);



function drawRegionsMap() {

  var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
  //all
  query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
  query1.send(drawDashboard);
}

function drawDashboard(response1) {

  var data1 = response1.getDataTable();

  //set year that<2000 to 2000
  for (i = 0; i < data1.getNumberOfRows(); i++) {

    var startdate = new Date(data1.getValue(i, 12));


    var y = startdate.getFullYear();



    if (y < 2000) {

      r = data1.getValue(i, 12);

      //console.log(i);

      startdate.setFullYear(2000);

      data1.setValue(i, 12, startdate);



    }

  }

  //set start date to previous row end date - groupByRowLabel

  for (var row = 1; row < data1.getNumberOfRows(); row++) {

    if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   

      if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
        data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
      }
    }
  }







  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([
    //index column 0
    {
      type: 'string',
      id: 'Country',
      calc: function(dt, row) {
        //return countryname statename - policies // USA New York - WEEE
        return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
      }
    },
    //index column 1

    {
      type: 'string',
      id: 'region',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 8)
      }
    }
    //index column 2
    , {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 11)
        var formatter = new google.visualization.DateFormat({
          pattern: "MMMM yyyy"
        });
        var startdate = formatter.formatValue(dt.getValue(row, 12));
        //var startdate = dt.getFormattedValue(row, 12)
        var comment = dt.getFormattedValue(row, 15)
        //colorValues.push(dt.getFormattedValue(row, 6))
        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      }
    },
    //style role
    {
      type: 'string',
      id: 'color',
      role: 'style',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 25)
      }
    },


    //index column 3,4 start-enddate
    12, 13,

  ]);



  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    //dataTable: 'data1',
    containerId: 'colormap1',
    options: {
      width: 870,
      height: 800,
      //colors: colorValues,

      timeline: {
        groupByRowLabel: true,
        rowLabelStyle: {
          fontSize: 14,
          width: 800,

        },
        showBarLabels: false
      },
      hAxis: {
        minValue: new Date(2010, 0, 0),
        maxValue: new Date(2017, 0, 0)
      },
      tooltip: {
        isHtml: true
      },
    }


  });


  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnIndex': '1',
      'ui': {
        'labelStacking': 'vertical',
        'caption': 'Choose a Region',
        'cssClass': 'filter',
        'selectedValuesLayout': 'aside',
        'allowTyping': false,
        'allowMultiple': true
      }
    }
  });


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




  // Establish dependencies, declaring that 'filter' drives 'pieChart',
  // so that the pie chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(namePicker, chart1);
  // Draw the dashboard.
  dashboard.draw(view1);


  google.visualization.events.addListener(chart1, 'ready', function() {
    var svgParent = colormap1.getElementsByTagName('svg')[0];

    svgParent.parentNode.style.top = '40px';

    Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
      if ((text.getAttribute('text-anchor') === 'end') &&
        (parseFloat(text.getAttribute('x')) < 200)) {
        text.setAttribute("x", "5");
        text.setAttribute("text-anchor", "start");
      }


      if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {

        var groupLabel = text.cloneNode(true);
        groupLabel.setAttribute('x', '850');
        groupLabel.innerHTML = '2017';
        groupLabel.setAttribute('y', '971.05');
        groupLabel.setAttribute('font-family', 'Arial');
        groupLabel.setAttribute('font-size', '13');
        svgParent.appendChild(groupLabel);



      }


    })



  })
  google.visualization.events.addListener(chart1, 'select', tableSelectHandler);


  function tableSelectHandler() {
    var selection = chart1.getChart().getSelection()[0];
    var chartDataView = chart1.getDataTable();
    var rowindex = chartDataView.getTableRowIndex(selection.row);
    var cnid = data1.getValue(rowindex, 0);
    var polid = data1.getValue(rowindex, 1);
    var strid = data1.getValue(rowindex, 2);
    //var sid = (strid) - 1;

    var statecode = data1.getValue(rowindex, 4);

    //if (selection.length > 0) {
    //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
    window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
    //}
  }
  google.visualization.events.addListener(namePicker, 'statechange', hidediv);

  function hidediv() {
    $(document).ready(function() {
      $("#:0.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
      $("#:4.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
    })
  }


}

.filter .google-visualization-controls-categoryfilter-selected li {
  background-color: #e65100;
  border: 1px solid #ff9800;
  color: #ffffff;
  padding: 6px;
}

.filter .goog-link-button {
  cursor: pointer;
  float: right;
  margin-left: 4px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<div id="dashboard_div">

  <div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>

  <div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>

  <div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>


  <div id="filter_div"></div>
  <!--chart_div!-->
  <div id='colormap1' style="position:fixed;">

  </div>
</div>
</body>

</html>

<小时/>

删除使用默认样式的选项...

'cssClass': 'filter'

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

google.charts.load('current', {
  'packages': ['corechart', 'controls']
});

google.charts.setOnLoadCallback(drawRegionsMap);



function drawRegionsMap() {

  var query1 = new google.visualization.Query("https://docs.google.com/spreadsheets/d/1sOyYwL51uWTd7Pv4Sp_bKdxWmH-g6QA2SDHhw93_2s8/edit?usp=sharing");
  //all
  query1.setQuery('select * where J="Take back policy model" order by F,Y,M,N,L');
  query1.send(drawDashboard);
}

function drawDashboard(response1) {

  var data1 = response1.getDataTable();

  //set year that<2000 to 2000
  for (i = 0; i < data1.getNumberOfRows(); i++) {

    var startdate = new Date(data1.getValue(i, 12));


    var y = startdate.getFullYear();



    if (y < 2000) {

      r = data1.getValue(i, 12);

      //console.log(i);

      startdate.setFullYear(2000);

      data1.setValue(i, 12, startdate);



    }

  }

  //set start date to previous row end date - groupByRowLabel

  for (var row = 1; row < data1.getNumberOfRows(); row++) {

    if (data1.getValue(row - 1, 5) == data1.getValue(row, 5) && data1.getValue(row - 1, 6) == data1.getValue(row, 6)) { //if the previous one has the same label   

      if (data1.getValue(row - 1, 13) > data1.getValue(row, 12)) { // if the previous end date is greater than the start date of current row
        data1.setValue(row - 1, 13, data1.getValue(row, 12)) // set the previous end date to the start date of current row
      }
    }
  }







  var view1 = new google.visualization.DataView(data1);
  view1.setColumns([
    //index column 0
    {
      type: 'string',
      id: 'Country',
      calc: function(dt, row) {
        //return countryname statename - policies // USA New York - WEEE
        return dt.getFormattedValue(row, 5) + " " + dt.getFormattedValue(row, 22) + " - " + dt.getFormattedValue(row, 6)
      }
    },
    //index column 1

    {
      type: 'string',
      id: 'region',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 8)
      }
    }
    //index column 2
    , {
      type: 'string',
      role: 'tooltip',
      properties: {
        html: true
      },
      calc: function(dt, row) {
        var country = dt.getFormattedValue(row, 5)
        var policy = dt.getFormattedValue(row, 6)
        var dataname = dt.getFormattedValue(row, 8)
        var dropname = dt.getFormattedValue(row, 11)
        var formatter = new google.visualization.DateFormat({
          pattern: "MMMM yyyy"
        });
        var startdate = formatter.formatValue(dt.getValue(row, 12));
        //var startdate = dt.getFormattedValue(row, 12)
        var comment = dt.getFormattedValue(row, 15)
        //colorValues.push(dt.getFormattedValue(row, 6))
        return '<br><div id="country">' + country + " - " + policy + '<br><br></div> ' +
          '<div id="header1">Dominant (E)PR policy model:<br></div>' +
          '<div id="dropname">' + dropname + '<br><br></div>' +
          '<div id ="header2">Since :&nbsp;</div><div id="date">' + startdate + " " + 'to current</div><br><br><br>' +
          '<div id ="comment">' + comment + '<\/div>'
      }
    },
    //style role
    {
      type: 'string',
      id: 'color',
      role: 'style',
      calc: function(dt, row) {
        return dt.getFormattedValue(row, 25)
      }
    },


    //index column 3,4 start-enddate
    12, 13,

  ]);



  var chart1 = new google.visualization.ChartWrapper({
    chartType: 'Timeline',
    //dataTable: 'data1',
    containerId: 'colormap1',
    options: {
      width: 870,
      height: 800,
      //colors: colorValues,

      timeline: {
        groupByRowLabel: true,
        rowLabelStyle: {
          fontSize: 14,
          width: 800,

        },
        showBarLabels: false
      },
      hAxis: {
        minValue: new Date(2010, 0, 0),
        maxValue: new Date(2017, 0, 0)
      },
      tooltip: {
        isHtml: true
      },
    }


  });


  var namePicker = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnIndex': '1',
      'ui': {
        'labelStacking': 'vertical',
        'caption': 'Choose a Region',
        'selectedValuesLayout': 'aside',
        'allowTyping': false,
        'allowMultiple': true
      }
    }
  });


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




  // Establish dependencies, declaring that 'filter' drives 'pieChart',
  // so that the pie chart will only display entries that are let through
  // given the chosen slider range.
  dashboard.bind(namePicker, chart1);
  // Draw the dashboard.
  dashboard.draw(view1);


  google.visualization.events.addListener(chart1, 'ready', function() {
    var svgParent = colormap1.getElementsByTagName('svg')[0];

    svgParent.parentNode.style.top = '40px';

    Array.prototype.forEach.call(colormap1.getElementsByTagName('text'), function(text) {
      if ((text.getAttribute('text-anchor') === 'end') &&
        (parseFloat(text.getAttribute('x')) < 200)) {
        text.setAttribute("x", "5");
        text.setAttribute("text-anchor", "start");
      }


      if ((text.getAttribute('text-anchor') === 'middle') && (parseFloat(text.getAttribute('x')) < 850)) {

        var groupLabel = text.cloneNode(true);
        groupLabel.setAttribute('x', '850');
        groupLabel.innerHTML = '2017';
        groupLabel.setAttribute('y', '971.05');
        groupLabel.setAttribute('font-family', 'Arial');
        groupLabel.setAttribute('font-size', '13');
        svgParent.appendChild(groupLabel);



      }


    })



  })
  google.visualization.events.addListener(chart1, 'select', tableSelectHandler);


  function tableSelectHandler() {
    var selection = chart1.getChart().getSelection()[0];
    var chartDataView = chart1.getDataTable();
    var rowindex = chartDataView.getTableRowIndex(selection.row);
    var cnid = data1.getValue(rowindex, 0);
    var polid = data1.getValue(rowindex, 1);
    var strid = data1.getValue(rowindex, 2);
    //var sid = (strid) - 1;

    var statecode = data1.getValue(rowindex, 4);

    //if (selection.length > 0) {
    //http://www.sagisepr.com/country.php?country=21&polsel=1&sid=17&statecode=AR
    window.open("http://www.sagisepr.com/country.php?country=" + cnid + "&polsel=" + polid + "&sid=" + strid + "&statecode=" + statecode);
    //}
  }
  google.visualization.events.addListener(namePicker, 'statechange', hidediv);

  function hidediv() {
    $(document).ready(function() {
      $("#:0.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
      $("#:4.goog-menuitem goog-option goog-menuitem-highlight").change(function(event) {
        document.getElementById('2000').hide();
        document.getElementById('2010').hide();
        document.getElementById('2017').hide();

      });
    })
  }


}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<div id="dashboard_div">

  <div id="2000" style="z-index:1;position: fixed;top: 70px;left: 168px;font-family: Arial;font-size: 13;color:red;">2000</div>

  <div id="2010" style="z-index:1;position: fixed;top: 70px;left: 556px;font-family: Arial;font-size: 13;color:red;">2010</div>

  <div id="2017" style="z-index:1;position: fixed;top: 70px;left: 850px;font-family: Arial;font-size: 13;color:red;">2017</div>


  <div id="filter_div"></div>
  <!--chart_div!-->
  <div id='colormap1' style="position:fixed;">

  </div>
</div>
</body>

</html>