Question

我已经设置了

时间轴：{showBarLabels：false}

在Google时间线图表的选项中

但很奇怪，它仍然在栏上显示标签

您可以在下面的代码段中看到结果

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script>
    google.charts.load('current', {
      packages: ["timeline"]
    });

    google.charts.setOnLoadCallback(drawRegionsMap);

    var data1;

    function handleQueryResponseTR1(response1) {
      if (response1.isError()) {
        alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
        return;
      }
      data1 = response1.getDataTable();


      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: 'dropname',
          calc: function(dt, row) {
            return dt.getFormattedValue(row, 11)
          }
        }
        //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 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>'
          }
        },
        //index column 3,4 start-enddate
        12, 13,
      ]);
      var chart1 = new google.visualization.Timeline(document.getElementById('colormap1'));

      var options1 = {

        width: 800,
        height: 600,
        timeline: {
          groupByRowLabel: true
        },
        timeline: {
          showBarLabels: false
        },
        timeline: {
          rowLabelStyle: {
            fontSize: 12,
            width: 300
          }
        },
        tooltip: {
          isHtml: true
        },
      };


      chart1.draw(view1, options1);

    }


    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');
      query1.send(handleQueryResponseTR1);
    }
  </script>

  <div id='colormap1'> </div>

如果有人知道这里发生了什么，请帮助，谢谢。

Answer 1

你不能在选项对象中有多个具有相同名称的键...

timeline的选项需要合并，

来自......

    timeline: {  // <-- multiple timeline
      groupByRowLabel: true
    },
    timeline: {  // <-- multiple timeline
      showBarLabels: false
    },
    timeline: {  // <-- multiple timeline
      rowLabelStyle: {
        fontSize: 12,
        width: 300
      }
    },

到...

        timeline: {
          groupByRowLabel: true,
          rowLabelStyle: {
            fontSize: 12,
            width: 300
          },
          showBarLabels: false
        },

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

＆＃13;

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script>
    google.charts.load('current', {
      packages: ["timeline"]
    });

    google.charts.setOnLoadCallback(drawRegionsMap);

    var data1;

    function handleQueryResponseTR1(response1) {
      if (response1.isError()) {
        alert('Error in query: ' + response1.getMessage() + ' ' + response1.getDetailedMessage());
        return;
      }
      data1 = response1.getDataTable();


      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: 'dropname',
          calc: function(dt, row) {
            return dt.getFormattedValue(row, 11)
          }
        }
        //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 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>'
          }
        },
        //index column 3,4 start-enddate
        12, 13,
      ]);
      var chart1 = new google.visualization.Timeline(document.getElementById('colormap1'));

      var options1 = {

        width: 800,
        height: 600,
        timeline: {
          groupByRowLabel: true,
          rowLabelStyle: {
            fontSize: 12,
            width: 300
          },
          showBarLabels: false
        },
        tooltip: {
          isHtml: true
        },
      };


      chart1.draw(view1, options1);

    }


    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');
      query1.send(handleQueryResponseTR1);
    }
  </script>

  <div id='colormap1'> </div>

＆＃13;

无法在Google时间线图表上隐藏Bar Lebel

1 个答案: