javascript - 过滤不在图表 GOOGLE CHART 中的列

标签 javascript html charts google-visualization

我不确定这是否有意义，或者这是否可行。我有一个图表，下面的列

feis，未放置舞者，工具提示，已放置舞者，工具提示，放置，工具提示。

所以我有 4 列，不包括工具提示。 但是，我想要 2 个额外的列，仅用于过滤目的。它不应该是可见的，或者以任何方式影响图表。 我想包括一个日期范围和一个列过滤器。

我尝试只是简单地添加列，然后使用 setview 隐藏它们，但是图表无法绘制。

这是我的代码，没有添加额外的列

function comboChart(){
            var data = google.visualization.arrayToDataTable([
                ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}],
                 ['Garden State Feis - 01-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22',  20, 'Lace\'s Placement: 20th Place'],['GEM CITY FEIS - 02-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place'],['Broesler Feis - 07-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15',  1, 'Lace\'s Placement: 1st place'],['GEM CITY FEIS - 08-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place'],['Garden State Feis - 12-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place'],                    
            ]);

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

    // Create a search filter, passing some options
    var searchfilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnLabel': 'feis',
        'ui': {
            label: 'Filter by feis'
        },
        'matchType':  'any'
      }
    });


             // Create a combo chart, passing some options
    var barChart = new google.visualization.ChartWrapper({
      'chartType': 'ComboChart',
      'containerId': 'combo_chart',
      'options': {
        tooltip: {isHtml: true},
                legend:'none',
                chartArea: {
                    height: '100%',
                    width: '100%',
                    top: 16,
                    right: 16,
                    bottom: 60,
                    left: 60
                },

                colors: ['#03a9f4', '#9ACB00', '#616161'],
                hAxis: {
                    title: 'Feis Competiton and date'
                },
                height: '100%',
                isStacked: true,
                legend: {
                    position: 'none'
                },
                pointSize: 6,
                series: {
                    2: {
                        type: 'line'
                    }
                },
                seriesType: 'bars',
                vAxis: {
                    ticks: [
                        {v: -40, f: '40'},
                        {v: -20, f: '20'},
                        0,
                        20,
                        40
                    ],
                    title: 'Placement'
                },
                width: '100%'
      },
        view: {
            columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']
        }
    });


    // 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(searchfilter, barChart);

    // Draw the dashboard.
    dashboard.draw(data);
  }

编辑

图表还是画不出来，我把日期去掉了，因为我觉得可能是这个问题。当我删除日期并调用图表时绘制，但当我添加它们时不绘制。

这是我更新后的代码:

            function majorChart(){
            var data = google.visualization.arrayToDataTable([
                ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'recalled'],
                 ['Garden State Feis - Jan-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22',  20, 'Lace\'s Placement: 20th Place', Yes],['Oireachtas MidAtlantic - Apr-01-2014', -14, 'Total Dancers Not Placed: 14', 30, 'Total Dancers Placed: 30',  14, 'Lace\'s Placement: 14th place', Yes],['GEM CITY FEIS - Feb-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', No],['Broesler Feis - Jul-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15',  1, 'Lace\'s Placement: 1st place', Yes],['GEM CITY FEIS - Aug-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', No],['Garden State Feis - Dec-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', No],                    
            ]);

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

    // Create a search filter, passing some options
    var searchfilter = new google.visualization.ControlWrapper({
      'controlType': 'StringFilter',
      'containerId': 'filter_major',
      'options': {
        'filterColumnLabel': 'feis',
        'ui': {
            label: 'Filter by feis or year'
        },
        'matchType':  'any'
      }
    });



var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'col_filter_major',
options: {
  filterColumnLabel: 'recalled',
}
});        

             // Create a combo chart, passing some options
    var barChart = new google.visualization.ChartWrapper({
      'chartType': 'ComboChart',
      'containerId': 'major',
      'options': {
        tooltip: {isHtml: true},
                legend:'none',
                chartArea: {
                    height: '100%',
                    width: '100%',
                    top: 16,
                    right: 16,
                    bottom: 60,
                    left: 60
                },

                colors: ['#03a9f4', '#9ACB00', '#616161'],
                hAxis: {
                    title: 'Feis Competiton and date'
                },
                height: '100%',
                isStacked: true,
                legend: {
                    position: 'none'
                },
                pointSize: 6,
                series: {
                    2: {
                        type: 'line'
                    }
                },
                seriesType: 'bars',
                vAxis: {
                    ticks: [
                        {v: -40, f: '40'},
                        {v: -30, f: '30'},
                        {v: -20, f: '20'},
                        {v: -10, f: '10'},
                        0,
                        10,
                        20,
                        30,
                        40
                    ],
                    title: 'Placement'
                },
                width: '100%'
      },
        view: {
            columns: [0, 1, 2, 3, 4, 5]
        }

    });


    // 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(searchfilter, colfilter, barChart);

    // Draw the dashboard.
    dashboard.draw(data);
  }

编辑 2

好的，这是我更新的代码:

function majorChart(){
            var data = google.visualization.arrayToDataTable([
  ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],

                ['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30',  1, 'Rob placed 1st out of 66 total dancers', new Date(10-27-2018), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34',  11, 'Rob placed 11th out of 78 total dancers', new Date(02-03-2019), 'No', '11th place'],  ]);

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

// Create a search filter, passing some options
var searchfilter = new google.visualization.ControlWrapper({
'controlType': 'StringFilter',
'containerId': 'filter_major',
'options': {
  'filterColumnLabel': 'feis',
  'ui': {
      label: 'Filter by feis'
  },
  'matchType':  'any'
}
});

var datefilter = new google.visualization.ControlWrapper({
controlType: 'DateRangeFilter',
containerId: 'date_filter_major',
options: {
  filterColumnLabel: 'date',
}
});
var colfilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'recalled_filter_major',
options: {
  filterColumnLabel: 'recalled',
    'ui': {
        label: 'Show Recalled'
    }
}

});

// Create a combo chart, passing some options
var barChart = new google.visualization.ChartWrapper({
'chartType': 'ComboChart',
'containerId': 'combo_chart',
'options': {
  tooltip: {isHtml: true},
          legend:'none',
          chartArea: {
              height: '100%',
              width: '100%',
              top: 16,
              right: 16,
              bottom: 60,
              left: 60
          },

          colors: ['#03a9f4', '#9ACB00', '#616161'],
          hAxis: {
              title: 'Feis Competiton and date'
          },
          height: '100%',
          isStacked: true,
          legend: {
              position: 'none'
          },
          pointSize: 6,
          series: {
              2: {
                  type: 'line'
              }
          },
          seriesType: 'bars',
          vAxis: {
              ticks: [
                  {v: -40, f: '40'},
                        {v: -30, f: '30'},
                        {v: -20, f: '20'},
                        {v: -10, f: '10'},
                        0,
                        10,
                        20,
                        30,
                        40
              ],
              title: 'Placement'
          },
          width: '100%'
},
view: {
    columns: [0, 1, 2, 3, 4, 5, 6, 9]
}
});

dashboard.bind([searchfilter, datefilter, colfilter], barChart);

dashboard.draw(data);
}

过滤器正在出现。但图表本身并未绘制。日期过滤器也不正确..

enter image description here

最佳答案

在控件或图表包装器上使用view时，
columns 和 rows 属性应该是索引，
不是标签...

这里不是列标签...

columns: ['feis', 'Dancers Not Placed', 'Dancers Placed', 'Placement']

使用列索引...

columns: [0, 1, 2, 3, 4, 5, 6]

然后您可以向数据表添加额外的列，图表将忽略这些列。
请参阅以下工作片段...

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
      ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'column'],
      ['Garden State Feis - 01-05-2014', -18, 'Total Dancers Not Placed: 18', 22, 'Total Dancers Placed: 22',  20, 'Lace\'s Placement: 20th Place', new Date(2018, 11, 1), 'A'],
      ['GEM CITY FEIS - 02-14-2018', -42, 'Total Dancers Not Placed: 42', 38, 'Total Dancers Placed: 38', - 1, 'Lace\'s Placement: 1st place', new Date(2018, 11, 2), 'B'],
      ['Broesler Feis - 07-09-2018', -15, 'Total Dancers Not Placed: 15', 15, 'Total Dancers Placed: 15',  1, 'Lace\'s Placement: 1st place', new Date(2018, 11, 3), 'C'],
      ['GEM CITY FEIS - 08-21-2018', -21, 'Total Dancers Not Placed: 21', 26, 'Total Dancers Placed: 26', - 2, 'Lace\'s Placement: 2nd place', new Date(2018, 11, 4), 'D'],
      ['Garden State Feis - 12-01-2018', -48, 'Total Dancers Not Placed: 48', 12, 'Total Dancers Placed: 12', - 15, 'Lace\'s Placement: 15th Place', new Date(2018, 11, 5), 'E'],
  ]);

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

  // Create a search filter, passing some options
  var searchfilter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'filter_div',
    'options': {
      'filterColumnLabel': 'feis',
      'ui': {
          label: 'Filter by feis'
      },
      'matchType':  'any'
    }
  });

  var datefilter = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'date_filter',
    options: {
      filterColumnLabel: 'date',
    }
  });
  var colfilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'col_filter',
    options: {
      filterColumnLabel: 'column',
    }
  });

  // Create a combo chart, passing some options
  var barChart = new google.visualization.ChartWrapper({
    'chartType': 'ComboChart',
    'containerId': 'combo_chart',
    'options': {
      tooltip: {isHtml: true},
              legend:'none',
              chartArea: {
                  height: '100%',
                  width: '100%',
                  top: 16,
                  right: 16,
                  bottom: 60,
                  left: 60
              },

              colors: ['#03a9f4', '#9ACB00', '#616161'],
              hAxis: {
                  title: 'Feis Competiton and date'
              },
              height: '100%',
              isStacked: true,
              legend: {
                  position: 'none'
              },
              pointSize: 6,
              series: {
                  2: {
                      type: 'line'
                  }
              },
              seriesType: 'bars',
              vAxis: {
                  ticks: [
                      {v: -40, f: '40'},
                      {v: -20, f: '20'},
                      0,
                      20,
                      40
                  ],
                  title: 'Placement'
              },
              width: '100%'
    },
    view: {
        columns: [0, 1, 2, 3, 4, 5, 6]
    }
  });


  // 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([searchfilter, datefilter, colfilter], barChart);

  // Draw the dashboard.
  dashboard.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_div"></div>
  <div id="date_filter"></div>
  <div id="col_filter"></div>
  <div id="combo_chart"></div>
</div>

更新

你的日期构造函数有问题，
在下文中，日期应作为字符串括在引号中。 

new Date(10-27-2018) // <-- bad
new Date('10-27-2018') // <-- good

没有引号，语句等同于...

new Date(-2035)  // <-- 10 minus 27 minus 2018 = -2035

这就是为什么它仍然有效，但你得到了一个糟糕的约会。

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

google.charts.load('current', {
  packages: ['controls', 'corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['feis', 'Dancers Not Placed', {type: 'string', role: 'tooltip'}, 'Dancers Placed', {type: 'string', role: 'tooltip'}, 'Placement', {type: 'string', role: 'tooltip'}, 'date', 'recalled', {type: 'string', role: 'annotation'}],
    ['Halloween Feis - Oct-27-2018', -36, 'Total Dancers Not Placed: 36', 30, 'Total Dancers Placed: 30',  1, 'Rob placed 1st out of 66 total dancers', new Date('10-27-2018'), 'Yes', '1st place'],['North Coast Feis - Feb-03-2019', -44, 'Total Dancers Not Placed: 44', 34, 'Total Dancers Placed: 34',  11, 'Rob placed 11th out of 78 total dancers', new Date('02-03-2019'), 'No', '11th place'],
  ]);

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

  // Create a search filter, passing some options
  var searchfilter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'filter_major',
    'options': {
      'filterColumnLabel': 'feis',
      'ui': {
          label: 'Filter by feis'
      },
      'matchType':  'any'
    }
  });

  var datefilter = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'date_filter_major',
    options: {
      filterColumnLabel: 'date',
    }
  });
  var colfilter = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'recalled_filter_major',
    options: {
      filterColumnLabel: 'recalled',
        'ui': {
            label: 'Show Recalled'
        }
    }
  });

  // Create a combo chart, passing some options
  var barChart = new google.visualization.ChartWrapper({
    chartType: 'ComboChart',
    containerId: 'combo_chart',
    options: {
      tooltip: {isHtml: true},
      legend:'none',
      chartArea: {
          height: '100%',
          width: '100%',
          top: 16,
          right: 16,
          bottom: 60,
          left: 60
      },
      colors: ['#03a9f4', '#9ACB00', '#616161'],
      hAxis: {
          title: 'Feis Competiton and date'
      },
      height: '100%',
      isStacked: true,
      legend: {
          position: 'none'
      },
      pointSize: 6,
      series: {
          2: {
              type: 'line'
          }
      },
      seriesType: 'bars',
      vAxis: {
        ticks: [
          {v: -40, f: '40'},
          {v: -30, f: '30'},
          {v: -20, f: '20'},
          {v: -10, f: '10'},
          0,
          10,
          20,
          30,
          40
        ],
        title: 'Placement'
      },
      width: '100%'
    },
    view: {
        columns: [0, 1, 2, 3, 4, 5, 6, 9]
    }
  });

  dashboard.bind([searchfilter, datefilter, colfilter], barChart);
  dashboard.draw(data);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard_div">
  <div id="filter_major"></div>
  <div id="date_filter_major"></div>
  <div id="recalled_filter_major"></div>
  <div id="combo_chart"></div>
</div>

关于javascript - 过滤不在图表 GOOGLE CHART 中的列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53605052/

上一篇：javascript - 尝试创建一个改变背景颜色的按钮

下一篇：html - 内部运行时 css 干扰页面默认 CSS

相关文章：

java - 在 DIV HTML 中遍历或查找元素的最快方法

javascript - angular.js 文本区域字符计数以排除计数空格和换行符

javascript - 颜色谷歌虚拟化 bool 列

javascript - 如何隐藏highcharts实体仪表图的中间值？

javascript - 谷歌饼图标签

html - 当以百分比设置高度时，保持图像宽度与高度相同

javascript - 如果必填字段为空，则不要打开弹出窗口

html - 使 CSS 下拉列表出现在 div 上

ios - 使用图表设置饼图的最大值和宽度

javascript - 为什么 JQuery 不触发添加的事件监听器？

©2024 IT工具网  联系我们