Question

如图所示

Google Chart上所选的categoryfilter值看起来很糟糕，

x应该在值文本的右边，并且应该有一个bg颜色框让它看起来更好

如何为此设置样式？

可运行的代码段

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

选项的类名 - ＆gt; 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 : </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;
}

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

＆＃13;

<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>

＆＃13;

'cssClass': 'filter'

＆＃13;

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();

      });
    })
  }


}

＆＃13;

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

<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>

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

＆＃13;

{{1}}

＆＃13;

{{1}}

＆＃13;

如何在Google Chart上的categoryfilter中更改selectedvalue的样式？

1 个答案: