javascript - 使用 group() 函数的 Google 可视化堆积柱形图

标签 javascript charts google-visualization

预先...非常感谢论坛在这里提供帮助!

我正在尝试使用 group() 函数构建一个包含 4 个堆叠列 和 1 行 的图表。

原始数据表是这样的(请忽略目标): [![在此处输入图片描述][1]][1]

分组后的数据表应该是这样的(请忽略目标和总目标): [![在此处输入图片描述][2]][2]

我可以看到仪表板呈现，但它真的很瘦，我无法弄清楚是什么让它这样做。看起来它至少拾取了分组的 EZ 数字，因为鼠标悬停在上面显示了预期的分组总数。

目标的行为也很奇怪。我想我需要对一天的总计进行某种计算才能修复这部分。我将在更正堆叠条后解决此问题。(编辑:我现在已经知道如何处理此问题。)

但我真的不知道它在做什么，因为它太小了!

编辑:WhiteHat 的以下回复效果很好。 

// 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() {
  drawDashboard_TEMPLATE4("2", "LineName");
};

function drawDashboard_TEMPLATE4(p1, v1) {

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

  var urlParameter1 = '?prodID=';
  var urlParameter1_Value = p1; //comes from index

  var prodID_Name = v1; //comes from index

  //Temporary until final data source.  Then use above.
  var urlParameter1 = '?ohg='
  var urlParameter1_Value = '982A01';

  //Temporary until final data source used as filter instead.  Use above.    
  var prodFilter = Number(p1);

  var urlString = '../WWIDetailRaws/filterWWIDetails' + urlParameter1 + urlParameter1_Value;
  var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls

  $.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,
          "calDay": new Date(2017, 10, 15),
          "v1": 100,
          "goal": 200,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0024"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 110,
          "goal": 210,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0025"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 120,
          "goal": 220,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0024"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 130,
          "goal": 230,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0025"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 140,
          "goal": 240,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017423"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 150,
          "goal": 250,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017424"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 160,
          "goal": 260,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017423"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 170,
          "goal": 270,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017424"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 180,
          "goal": 280,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 190,
          "goal": 290,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 300,
          "goal": 400,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 310,
          "goal": 410,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 17),
          "v1": 320,
          "goal": 420,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 17),
          "v1": 330,
          "goal": 430,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        }
      ];

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

      //Add Columns
      data.addColumn('number', 'prodID'); //0 prodID
      data.addColumn('date', 'Calendar Day'); //1 calDay
      data.addColumn('number', 'EZFE'); //2 case from v1
      data.addColumn('number', 'EZRS'); //3 case from v1
      data.addColumn('number', 'EZ'); //4 case from v1
      data.addColumn('number', 'Other'); //5 case from v1
      data.addColumn('number', 'Goal'); //6 goal

      data.addColumn('string', 'Plant'); //7 p1
      data.addColumn('string', 'GB'); //8 p2
      data.addColumn('string', 'Overhead Group'); //9 p3
      data.addColumn('string', 'Profit Center'); //10 p4
      data.addColumn('string', 'MRP'); //11 p5
      data.addColumn('string', 'MBR Stock Category'); //12 p6
      data.addColumn('string', 'Valuation Class'); //13 p7
      data.addColumn('string', 'Inventory Element'); //14 p8
      data.addColumn('string', 'Material'); //15 p9

      //Format date object into from JSON to ISO
      var dateJSON = new Date(); //obj.clnDate
      var y = dateJSON.getFullYear();
      var m = dateJSON.getMonth();
      var d = dateJSON.getDate();
      var dateISO = new Date(y, m, d);

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {

        var bar1 = 0; //EZRS
        var bar2 = 0; //EZFE
        var bar3 = 0; //FE
        var bar4 = 0; //Other

        switch (obj.p6) {
          case 'EZRS':
            bar1 = obj.v1;
            break;
          case 'EZFE':
            bar2 = obj.v1;
            break;
          case 'FE':
            bar3 = obj.v1;
            break;
          default:
            bar4 = obj.v1;
        }

        dataArray.push([
          obj.prodID,
          //dateISO,
          obj.calDay,
          bar1, bar2, bar3, bar4, obj.goal,
          obj.p1, obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, obj.p8, obj.p9
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setRows(data.getFilteredRows([{
        column: 0,
        value: prodFilter
      }]));
      //view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

      //Create Data Aggregation
      var groupView = google.visualization.data.group(view, [{
          column: 1,
          type: 'date'
        }, //0
        {
          column: 12,
          type: 'string'
        } //1   MBR
      ], [{
          column: 2,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //2  EZRS
        {
          column: 3,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //3  EZFE
        {
          column: 4,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //4 FE
        {
          column: 5,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //5  OTHER
        //{
          //column: 6,
          //aggregation: google.visualization.data.sum,
          //type: 'number'
        //} //6
      ]);

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

      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          filterColumnIndex: 0,
          ui: {
            chartType: 'ComboChart',
            chartView: {
              columns: [0, 2, 3, 4, 5] //removed 6 goal
            },
            chartOptions: {
              //seriesType: 'bars',
              height: 50,
              //width: 600,
              chartArea: {
                width: '80%'
              },
              series: {
                //column 1 is first v1 - Start couting 0 here for series.
                0: {
                  color: 'rgb(0, 86, 145)'
                },
                /* Dark Blue */
                1: {
                  color: 'rgb(0, 142, 207)'
                },
                /* Light Blue */
                2: {
                  color: 'rgb(127, 198, 231)'
                },
                /* Light Blue Pastell */
                3: {
                  color: 'rgb(191,192,194)'
                },
                /* Light Gray */
                4: {
                  color: 'rgb(226,0,21)'
                },
                /* Red */
              },
            }, //END chartOptions                        
          } //END ui
        } //END 'options'
      }); //END categoryPicker1

      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
        'view': {
          'columns': [0, 2, 3, 4, 5] //removed 6 goal
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          series: {
            //column 1 is first v1 - Start couting 0 here for series.
            0: {
              color: 'rgb(0, 86, 145)'
            },
            /* Dark Blue */
            1: {
              color: 'rgb(0, 142, 207)'
            },
            /* Light Blue */
            2: {
              color: 'rgb(127, 198, 231)'
            },
            /* Light Blue Pastell */
            3: {
              color: 'rgb(191,192,194)'
            },
            /* Light Gray */
            4: {
              color: 'rgb(226,0,21)',
              type: 'line',
            } /* Red */
          },
        }
      });

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

      //Draw dashboard
      dashboard.draw(groupView);

    } //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="">
  <div id="div_dashboard_table_TEMPLATE" style="width:100%;"></div>
  <div id="div_dashboard_chart_TEMPLATE" style="width:100%;"></div>
  <div id="div_dashboard_categoryPicker1_TEMPLATE" style="width:100%;"></div>
</div>

最佳答案

x 轴上的日期值导致瘦列，
因为每个日期代表一毫秒的时间
如果 x 轴上有 3 个日期，
这是很多毫秒来表示

在我看来，柱形图使用离散轴效果更好，
或字符串值

但是，范围过滤器不适用于字符串值
所以我们可以不用管数据，
并将计算列添加到图表的 view 属性...

  var formatDate = new google.visualization.DateFormat({
    pattern: 'MM/dd/yyyy'
  });
  var chart = new google.visualization.ChartWrapper({
    'chartType': 'ComboChart',
    'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
    'view': {
      columns: [
        {
          label: groupView.getColumnLabel(0),
          type: 'string',
          calc: function (dt, row) {
            return formatDate.formatValue(dt.getValue(row, 0));
          }
        }, 1, 2, 3, 4
      ]
    },
    ...

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

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

function gChart0() {
  drawDashboard_TEMPLATE4("2", "LineName");
};

function drawDashboard_TEMPLATE4(p1, v1) {

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

  var urlParameter1 = '?prodID=';
  var urlParameter1_Value = p1; //comes from index

  var prodID_Name = v1; //comes from index

  //Temporary until final data source.  Then use above.
  var urlParameter1 = '?ohg='
  var urlParameter1_Value = '982A01';

  //Temporary until final data source used as filter instead.  Use above.    
  var prodFilter = Number(p1);

  var urlString = '../WWIDetailRaws/filterWWIDetails' + urlParameter1 + urlParameter1_Value;
  var urlString_temp = 'https://httpbin.org/get'; //HTTP Test server that accepts GET/Post calls

  $.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,
          "calDay": new Date(2017, 10, 15),
          "v1": 100,
          "goal": 200,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0024"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 110,
          "goal": 210,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0025"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 120,
          "goal": 220,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0024"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 130,
          "goal": 230,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZRS",
          "p7": "3000",
          "p8": "I",
          "p9": "6002LG0025"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 140,
          "goal": 240,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017423"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 150,
          "goal": 250,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017424"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 160,
          "goal": 260,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017423"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 170,
          "goal": 270,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "EZFE",
          "p7": "7900",
          "p8": "I",
          "p9": "0258017424"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 180,
          "goal": 280,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 15),
          "v1": 190,
          "goal": 290,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 300,
          "goal": 400,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 16),
          "v1": 310,
          "goal": 410,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 17),
          "v1": 320,
          "goal": 420,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MG"
        },
        {
          "prodID": 2,
          "calDay": new Date(2017, 10, 17),
          "v1": 330,
          "goal": 430,
          "p1": "9820",
          "p2": "GS",
          "p3": "982G01",
          "p4": "P00258",
          "p5": "315",
          "p6": "FE",
          "p7": "7920",
          "p8": "I",
          "p9": "02580173502MF"
        }
      ];

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

      //Add Columns
      data.addColumn('number', 'prodID'); //0 prodID
      data.addColumn('date', 'Calendar Day'); //1 calDay
      data.addColumn('number', 'EZFE'); //2 case from v1
      data.addColumn('number', 'EZRS'); //3 case from v1
      data.addColumn('number', 'EZ'); //4 case from v1
      data.addColumn('number', 'Other'); //5 case from v1
      data.addColumn('number', 'Goal'); //6 goal

      data.addColumn('string', 'Plant'); //7 p1
      data.addColumn('string', 'GB'); //8 p2
      data.addColumn('string', 'Overhead Group'); //9 p3
      data.addColumn('string', 'Profit Center'); //10 p4
      data.addColumn('string', 'MRP'); //11 p5
      data.addColumn('string', 'MBR Stock Category'); //12 p6
      data.addColumn('string', 'Valuation Class'); //13 p7
      data.addColumn('string', 'Inventory Element'); //14 p8
      data.addColumn('string', 'Material'); //15 p9

      //Format date object into from JSON to ISO
      var dateJSON = new Date(); //obj.clnDate
      var y = dateJSON.getFullYear();
      var m = dateJSON.getMonth();
      var d = dateJSON.getDate();
      var dateISO = new Date(y, m, d);

      //Add Rows
      var dataArray = [];
      $.each(result, function(i, obj) {

        var bar1 = 0; //EZRS
        var bar2 = 0; //EZFE
        var bar3 = 0; //FE
        var bar4 = 0; //Other

        switch (obj.p6) {
          case 'EZRS':
            bar1 = obj.v1;
            break;
          case 'EZFE':
            bar2 = obj.v1;
            break;
          case 'FE':
            bar3 = obj.v1;
            break;
          default:
            bar4 = obj.v1;
        }

        dataArray.push([
          obj.prodID,
          //dateISO,
          obj.calDay,
          bar1, bar2, bar3, bar4, obj.goal,
          obj.p1, obj.p2, obj.p3, obj.p4, obj.p5, obj.p6, obj.p7, obj.p8, obj.p9
        ]);
      });
      data.addRows(dataArray);

      //Create Data View
      var view = new google.visualization.DataView(data);
      view.setRows(data.getFilteredRows([{
        column: 0,
        value: prodFilter
      }]));
      //view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);

      //Create Data Aggregation
      var groupView = google.visualization.data.group(view, [1], [
        {
          column: 2,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //2  EZRS
        {
          column: 3,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //3  EZFE
        {
          column: 4,
          aggregation: google.visualization.data.sum,
          type: 'number'
        }, //4 FE
        {
          column: 5,
          aggregation: google.visualization.data.sum,
          type: 'number'
        } //5  OTHER
      ]);

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

      var categoryPicker1 = new google.visualization.ControlWrapper({
        'controlType': 'ChartRangeFilter',
        'containerId': 'div_dashboard_categoryPicker1' + divID_suffixFunction + divID_suffixParameter1,
        'options': {
          filterColumnIndex: 0,
          ui: {
            chartType: 'LineChart',
            chartOptions: {
              height: 50,
              chartArea: {
                width: '80%'
              },
              series: {
                //column 1 is first v1 - Start couting 0 here for series.
                0: {
                  color: 'rgb(0, 86, 145)'
                },
                /* Dark Blue */
                1: {
                  color: 'rgb(0, 142, 207)'
                },
                /* Light Blue */
                2: {
                  color: 'rgb(127, 198, 231)'
                },
                /* Light Blue Pastell */
                3: {
                  color: 'rgb(191,192,194)'
                },
                /* Light Gray */
                4: {
                  color: 'rgb(226,0,21)'
                },
                /* Red */
              },
            }, //END chartOptions                        
          } //END ui
        } //END 'options'
      }); //END categoryPicker1

      var formatDate = new google.visualization.DateFormat({
        pattern: 'MM/dd/yyyy'
      });
      var chart = new google.visualization.ChartWrapper({
        'chartType': 'ComboChart',
        'containerId': 'div_dashboard_chart' + divID_suffixFunction + divID_suffixParameter1,
        'view': {
          columns: [
            {
              label: groupView.getColumnLabel(0),
              type: 'string',
              calc: function (dt, row) {
                return formatDate.formatValue(dt.getValue(row, 0));
              }
            }, 1, 2, 3, 4
          ]
        },
        'options': {
          width: '100%',
          height: 'auto',
          seriesType: 'bars',
          isStacked: true,
          series: {
            //column 1 is first v1 - Start couting 0 here for series.
            0: {
              color: 'rgb(0, 86, 145)'
            },
            /* Dark Blue */
            1: {
              color: 'rgb(0, 142, 207)'
            },
            /* Light Blue */
            2: {
              color: 'rgb(127, 198, 231)'
            },
            /* Light Blue Pastell */
            3: {
              color: 'rgb(191,192,194)'
            },
            /* Light Gray */
            4: {
              color: 'rgb(226,0,21)',
              type: 'line',
            } /* Red */
          },
        }
      });

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

      //Draw dashboard
      dashboard.draw(groupView);

    } //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="">
  <div id="div_dashboard_table_TEMPLATE" style="width:100%;"></div>
  <div id="div_dashboard_chart_TEMPLATE" style="width:100%;"></div>
  <div id="div_dashboard_categoryPicker1_TEMPLATE" style="width:100%;"></div>
</div>

关于javascript - 使用 group() 函数的 Google 可视化堆积柱形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47417342/

上一篇：javascript - Quill JS - 获取 html 选择

下一篇：javascript - DynamoDB 'createSet' 返回 'constructor' 而不是 'Set'

相关文章：

javascript - 如何使用 Google Charts API 绘制两张 Material 图表而不一张为空？

javascript - 谷歌图表 : Column chart invert y axis

javascript - 使用 Ajax 使用 POST 验证表单，无需 jquery

javascript - 如何在 d3.js 中制作带有扩展网格的圆 Angular 条形图？

javascript - JQuery:添加到 Blogger HTML/Javascript 小工具时代码未运行

charts - 可以通过拖动点来编辑图形的图表库？

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

jquery - 如何从按钮 onclick 事件启动 fancybox 来绘制谷歌图表？

javascript - 是否可以从同一原型(prototype)对象中的另一个属性创建属性？

javascript - 限制输入类型数字中的字符数

©2024 IT工具网  联系我们