谷歌可视化图形类型堆叠真不工作

Question

如何在不使用图表类型的情况下显示堆积柱形图仅使用id名称，我想使用一个函数显示两个不同的变量...在选项变量中堆叠列是否有问题？让我知道如何通过使用具有相同功能的不同变量数据来优化我的代码，而无需使用switch case ??

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var charts = {};
  var options = {
       isStacked: true,
      chartArea: {
        height: '100%',
        width: '100%',
        top: 24,
        left: 64,
        right: 32,
        bottom: 48,
      },
      tooltip: {
        valueDecimals: 2,
        valueSuffix: ' USD',
        valuePrefix: '$'
      },
      vAxis: { 
        title: 'Cost in USD ($)', format:'$#',
      },
      height: '100%',
      legend: {
        position: 'bottom'
      },
      pointSize: 4,
      width: '100%'
    
  };
  //  daily and monthly  stacked columns charts data
  var jsonData = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",10.99034482758612],["2018-03-02",1.99268292682916],["2018-03-05",16.99324503311252],["2018-03-07",12.99268292682916],["2018-03-10",12.99377777777766],["2018-03-11",11.993525179856],["2018-03-12",10.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
  loadData(jsonData, '1' );

  var dailystacked = [{"name":"product a","data":[["2018-03-01",18.89034482758612],["2018-03-02",18.89268292682916],["2018-03-05",18.89324503311252],["2018-03-07",18.89268292682916],["2018-03-10",18.89377777777766],["2018-03-11",18.893525179856],["2018-03-12",18.89359999999988],["2018-03-13",18.89311475409824],["2018-03-14",18.89311475409824],["2018-03-15",18.89294117647046],["2018-03-16",18.89272727272716],["2018-03-17",18.89387173396662],["2018-03-18",18.89366292134818],["2018-03-19",18.8923456790122]]},{"name":"product b","data":[["2018-03-01",18.99034482758612],["2018-03-02",18.99268292682916],["2018-03-05",18.99324503311252],["2018-03-07",18.99268292682916],["2018-03-10",18.99377777777766],["2018-03-11",18.993525179856],["2018-03-12",18.99359999999988],["2018-03-13",18.99311475409824],["2018-03-14",18.99311475409824],["2018-03-15",18.99294117647046],["2018-03-16",18.99272727272716],["2018-03-17",18.99387173396662],["2018-03-18",18.99366292134818],["2018-03-19",18.9923456790122]]}];
  loadData(dailystacked, '2');

  // load json and dailystacked data
  function loadData(jsonData, id) {
    // create data table
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('date', 'Date'); 
    
       // add date column
       $.each(jsonData, function(productIndex, product) {
      // add product column
      var colIndex = dataTable.addColumn('number', product.name);

      // add product data
      $.each(product.data, function(dataIndex, data) {
        var rowIndex = dataTable.addRow();
        dataTable.setValue(rowIndex, 0, new Date(data[0]));
        dataTable.setValue(rowIndex, colIndex, data[1]);
      });
    });
     
    // draw chart
    $(window).resize(function () {
      drawChart(id,  dataTable);
    });
    drawChart(id, dataTable);
  }
  // draw chart
  function drawChart(id, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        'containerId': 'chart-' + id,
         'chartType': 'ColumnChart',
         
        options:
       {
        'isStacked'   : 'true',
        
    },
      });
    }
    charts[id].setDataTable(dataTable);
    charts[id].draw();
  }
});

html, body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  overflow: hidden;
  padding: 0px 0px 0px 0px;
}

.chart {
  display: inline-block;
  height: 100%;
  width: 60%;
}

<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 class="chart" id="chart-1"></div>
<div class="chart" id="chart-2"></div>