javascript - Google Charts - 仪表板 ComboChart 不堆叠条形图

Question

我正在尝试获取堆积条形图。下面的示例应该堆叠 2017-W30 的两个值。相反，它在 x 轴上给了我两次 2017-W30。

我在选项中使用 isStacked 但它不起作用。

'options': {
      width: '100%',
      height: 'auto',
      seriesType: 'bars',
      isStacked: true
    }

旁注:稍后我会尝试让球门线起作用。这就是我使用 'chartType': 'ComboChart', 的原因。

这是我的工作代码:

// Load the Visualization API and the corechart package.
google.charts.load('current', {
  'packages': ['corechart', 'table', 'gauge', 'controls']
});

// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(gChart0);

function gChart0() {
  drawChart();
};

function drawChart() {

  var divID_suffixFunction = '_TEMPLATE';
  var divID_suffixParameter1 = '';

  //var urlString = '../Logs/clnLogsCountingEvents?grade=All&SC=1&CauseSC=3';
  //var urlString_temp = 'https://jsonplaceholder.typicode.com/users';
  var urlString_temp = 'https://httpbin.org/get'; //source: https://resttesttest.com/

  $.ajax({
    type: 'GET',
    dataType: 'json',
    contentType: "application/json",
    //url: urlString,
    url: urlString_temp,
    success: function(result) {

      //Manually loaded "result" with JSON that normally comes from "urlString".   
      result = [{
          "prodID": 2,
          "calendarWeek": "2017-W29",
          "qty": 1,
          "goal": 5
        },
        {
          "prodID": 2,
          "calendarWeek": "2017-W30",
          "qty": 3,
          "goal": 5
        },
        {
          "prodID": 1,
          "calendarWeek": "2017-W30",
          "qty": 2,
          "goal": 5
        }
      ];

      //Create DataTable
      var data = new google.visualization.DataTable();

      //Add Columns
      data.addColumn('number', 'prodID');
      data.addColumn('string', 'calendarWeek');
      data.addColumn('number', 'qty');
      data.addColumn('number', 'goal');

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {
        dataArray.push([
          obj.prodID,
          obj.calendarWeek,
          obj.qty,
          obj.goal
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, 2, 3]);

      // Create a dashboard.
      var dashboard = new google.visualization.Dashboard(
        document.getElementById('div_dashboard' + divID_suffixFunction + divID_suffixParameter1));

      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          'filterColumnIndex': 0, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':'
          }
        }
      });

      var categoryPicker2 = new google.visualization.ControlWrapper({
        'controlType': 'StringFilter',
        'containerId': 'div_dashboard_categoryPicker2' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          'filterColumnIndex': 1, //Column used in control
          'ui': {
            //'label': 'Storage Bin',
            'labelStacking': 'vertical',
            'labelSeparator': ':'
          }
        }
      });

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
        'view': {
          'columns': [1, 2]
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          //series: { 2: { type: 'line' } }
        }
      });

      //Object Binding
      dashboard.bind([categoryPicker1, categoryPicker2], [chart]);

      // Draw the dashboard.
      dashboard.draw(view);

    } //END  success: function (result) {
  }); //END  $.ajax({
} //END  function drawChart()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>


<div id="div_dashboard_TEMPLATE" style="">
  <table style="width:100%">
    <tr>
      <td style="width:15%;">
        <div id="div_dashboard_categoryPicker1_TEMPLATE" style="padding-right:35px;"></div>
      </td>
      <td style="width:15%;">
        <div id="div_dashboard_categoryPicker2_TEMPLATE" style="padding-right:35px;"></div>
      </td>
    </tr>
  </table><br />
  <div id="div_dashboard_chart_TEMPLATE"></div>
</div>

一如既往，非常感谢您的帮助!

Answer 1

isStacked 选项将每一列的值堆叠在同一行中

为了叠加同一周的多个值，
您的数据需要类似于以下内容...

['calendarWeek', 'prodID 1', 'prodID 2', 'goal'],
['2017-W29', null, 1, 5],
['2017-W30', 2, 3, 5],

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

google.charts.load('current', {
  packages: ['controls']
}).then(function () {
  //Manually loaded "result" with JSON that normally comes from "urlString".
  result = [{
      "prodID": 2,
      "calendarWeek": "2017-W29",
      "qty": 1,
      "goal": 5
    },
    {
      "prodID": 2,
      "calendarWeek": "2017-W30",
      "qty": 3,
      "goal": 5
    },
    {
      "prodID": 1,
      "calendarWeek": "2017-W30",
      "qty": 2,
      "goal": 5
    }
  ];

  //Create DataTable
  var data = new google.visualization.DataTable();

  //Add Columns
  data.addColumn('string', 'calendarWeek');
  $.each(result, function(i, obj) {
    var colIndex = getColumnIndex('prodID ' + obj.prodID);
    if (colIndex === -1) {
      data.addColumn('number', 'prodID ' + obj.prodID);
    }
  });
  data.addColumn('number', 'goal');

  //Add Rows
  var dataArray = [];
  $.each(result, function(i, obj) {
    var rowIndex = getRowIndex(obj.calendarWeek);
    if (rowIndex === -1) {
      rowIndex = data.addRow();
    }
    data.setValue(rowIndex, 0, obj.calendarWeek);
    data.setValue(rowIndex, getColumnIndex('prodID ' + obj.prodID), obj.qty);
    data.setValue(rowIndex, getColumnIndex('goal'), obj.goal);
  });

  //Create Data View
  var view = new google.visualization.DataView(data);

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

  var categoryPicker1 = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'div_dashboard_categoryPicker1',
    'options': {
      'filterColumnIndex': getColumnIndex('calendarWeek'), //Column used in control
      'ui': {
        'labelStacking': 'vertical',
        'labelSeparator': ':'
      }
    }
  });

  var series = {};
  series[getColumnIndex('goal') - 1] = { type: 'line' };
  var chart = new google.visualization.ChartWrapper({
    'chartType': 'ComboChart',
    'containerId': 'div_dashboard_chart',
    'options': {
      width: '100%',
      height: 'auto',
      seriesType: 'bars',
      isStacked: true,
      series: series
    }
  });


  //Object Binding
  dashboard.bind([categoryPicker1], [chart]);

  // Draw the dashboard.
  dashboard.draw(view);

  function getColumnIndex(label) {
    var colIndex = -1;
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
      if (data.getColumnLabel(i) === label) {
        colIndex = i;
      }
    }
    return colIndex;
  }

  function getRowIndex(week) {
    var rowIndex = -1;
    for (var i = 0; i < data.getNumberOfRows(); i++) {
      if (data.getValue(i, 0) === (week)) {
        rowIndex = i;
      }
    }
    return rowIndex;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="div_dashboard">
  <div id="div_dashboard_categoryPicker1"></div>
  <div id="div_dashboard_categoryPicker2"></div>
  <div id="div_dashboard_chart"></div>
</div>