javascript - 查看属性在 Google 信息中心中不起作用

Question

图形代码(通过 C# 生成)

 function drawDashboard() {
     var data = google.visualization.arrayToDataTable([
         ['Group', 'Month', 'Count'],
         ['A', 1, 9],
         ['B', 1, 1],
         ['C', 1, 7],
         ['A', 2, 25],
         ['B', 2, 1],
         ['C', 2, 3]
     ]);
     var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
     var slider = new google.visualization.ControlWrapper({
         'controlType': 'CategoryFilter',
         'containerId': 'filter_div',
         'options': {
             'filterColumnLabel': 'Month',
             'ui': {
                 'labelStacking': 'vertical',
                 'allowTyping': false,
                 'allowMultiple': false,
                 'allowNone': false
             }
         }
     });
     var ColumnChart = new google.visualization.ChartWrapper({
         'chartType': 'ColumnChart',
         'containerId': 'chart_div',
         'options': {
             'legend': 'right',

// Relevant bit start //
                 'view': {
                     'columns': [0,2]
                 },

// Relevant bit END //

             width: '100%',
             height: '250',
             vAxis: {
                 minValue: 0
             }
         }
     });

// Rest of the code which executes comes after this

 }

在我的 option 属性中，我将 view 设置为仅使用 Group 和 Count

 'view': {
          'columns': [0,2]
          },

0 = 数组中的第一个值，即组
2 = 数组中的第三个值即计数在这个

['Group', 'Month', 'Count']

但在我的图表中，它也将月份计算为一个值。我只想使用 Month 作为过滤器。我不想在图表中将月份显示为值。

我不想要那里的蓝色列。只有红色应该在那里。

Google Control Doc Reference here

Answer 1

view 应该在同一级别定义，并与 options

分开

不在/作为选项的一部分

这样...

var ColumnChart = new google.visualization.ChartWrapper({
  'chartType': 'ColumnChart',
  'containerId': 'chart_div',
  'options': {
    'legend': 'right',
    'width': '100%',
    'height': 250,
    'vAxis': {
      'minValue': 0
    }
  },
  'view': {
    'columns': [0,2]
  }
});

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

google.charts.load('current', {
  'callback': function () {
    var data = google.visualization.arrayToDataTable([
      ['Group', 'Month', 'Count'],
      ['A', 1, 9],
      ['B', 1, 1],
      ['C', 1, 7],
      ['A', 2, 25],
      ['B', 2, 1],
      ['C', 2, 3]
    ]);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));
    var slider = new google.visualization.ControlWrapper({
      'controlType': 'CategoryFilter',
      'containerId': 'filter_div',
      'options': {
        'filterColumnLabel': 'Month',
        'ui': {
          'labelStacking': 'vertical',
          'allowTyping': false,
          'allowMultiple': false,
          'allowNone': false
        }
      }
    });
    var ColumnChart = new google.visualization.ChartWrapper({
      'chartType': 'ColumnChart',
      'containerId': 'chart_div',
      'options': {
        'legend': 'right',
        'width': '100%',
        'height': 250,
        'vAxis': {
          'minValue': 0
        }
      },
      'view': {
        'columns': [0,2]
      }
    });
    dashboard.bind(slider, ColumnChart);
    dashboard.draw(data);
  },
  'packages': ['corechart', 'controls']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>