查看无法在Google信息中心中使用的属性

时间:2016-07-31 15:43:17

标签: javascript c# google-api google-visualization

图形代码(通过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仅使用群组计数

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

0 =数组中的第一个值,即组
2 =数组中的第三个值,即Count 在这

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

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

我不希望那里有蓝色的列。只有红色应该在那里。

enter image description here

Google Control Doc Reference here

1 个答案:

答案 0 :(得分:1)

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

分开

options

中/作为<{1}}

的一部分

就这样......

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

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

&#13;
&#13;
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']
});
&#13;
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="filter_div"></div>
<div id="chart_div"></div>
&#13;
&#13;
&#13;