google charts x axis daily date not show it stacke

2019-07-26 16:04发布

站内问答 / JavaScript
1301 1 5

i am using google charts and stacked columns not working properly with large datasets or small data also here you can check code it working but not getting stacked columns data and when i use small datasets then display all small width horizontal columns.can you check my comment code thank you in advance
let me know if you know how to implement with different way ? i want to a graph looking like an image below
enter image description here

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};
  var options = {
  isStacked :'true',
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 60,
        left: 64,
        right: 32,
        bottom: 48,
        
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };

  // get data
  var jsonData = [{"name":"p1","data":[["2017/01/01",1.539011],["2017/01/02",4.22612],["2017/01/03",9.685247],["2017/01/04",8.535989],["2017/01/14",18.260888],["2017/01/15",57.279945],["2017/01/16",61.24776],["2017/01/17",65.12251399999998],["2017/01/18",69.15200200000001],["2017/01/19",73.13965199999997],["2017/01/20",77.10624],["2017/01/21",81.127521],["2017/01/22",85.04579900000002],["2017/01/23",89.003693],["2017/01/24",92.817327],["2017/01/25",64.12351600000001],["2017/02/04",4.734462000000001],["2017/02/05",17.073667999999998],["2017/02/06",21.047981999999998],["2017/02/07",16.340846]]},{"name":"p2","data":[["2017/01/01",3.4],["2017/01/02",8.8],["2017/01/03",19.4],["2017/01/04",16.9],["2017/01/14",33.8],["2017/01/15",106.19999999999999],["2017/01/16",113.4],["2017/01/17",120.6],["2017/01/18",127.79999999999998],["2017/01/19",135.0],["2017/01/20",142.20000000000002],["2017/01/21",149.5],["2017/01/22",156.6],["2017/01/23",163.79999999999998],["2017/01/24",170.70000000000002],["2017/01/25",118.0],["2017/02/04",9.3],["2017/02/05",32.7],["2017/02/06",39.900000000000006],["2017/02/07",30.6],["2017/04/14",16.6]]},{"name":"p3","data":[["2017/01/01",0.090284],["2017/01/02",0.18148],["2017/01/03",0.36250400000000005],["2017/01/04",0.3223319999999999],["2017/01/14",0.629936],["2017/01/15",1.9858830000000007],["2017/01/16",2.117427],["2017/01/17",2.248054],["2017/01/18",2.3795070000000007],["2017/01/19",2.510548],["2017/01/20",2.6411759999999997],["2017/01/21",2.806806],["2017/01/22",2.9025950000000007],["2017/01/23",3.0344140000000004],["2017/01/24",3.156505],["2017/01/25",2.18585],["2017/02/04",0.200327],["2017/02/05",0.700937],["2017/02/06",0.8522410000000002],["2017/02/07",0.651459]]}];
  
  loadData(jsonData, '0', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');

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

     
    }

    // draw chart
    $(window).resize(function () {
      drawChart(id, chartType, dataTable);
    });
    drawChart(id, chartType, dataTable);
  }

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart-' + id,
        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 {
  height: 100%;
}
<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-0"></div>

1条回答
Deceive 欺骗
2楼-- · 2019-07-26 16:20

to get the chart in the image, you will need to use a 'string' column for the x-axis, vs. 'date'

once the data table is built, use a data view to convert the date to a string
afterwards, you will need to group the data on the date string

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  // save charts for redraw
  var charts = {};
  var options = {
    isStacked :'true',
    Column: {
      chartArea: {
        height: '100%',
        width: '100%',
        top: 60,
        left: 64,
        right: 32,
        bottom: 48,
      },
      hAxis: {
        format: 'ddd'
      },
      height: '100%',
      legend: {
        position: 'top'
      },
      width: '100%'
    },
    Pie: {
      height: '100%',
      width: '100%'
    }
  };
  var formatDate = new google.visualization.DateFormat({
    pattern: 'MMM yyyy'
  });

  // get data
  var jsonData = [{"name":"p1","data":[["2017/01/01",1.539011],["2017/01/02",4.22612],["2017/01/03",9.685247],["2017/01/04",8.535989],["2017/01/14",18.260888],["2017/01/15",57.279945],["2017/01/16",61.24776],["2017/01/17",65.12251399999998],["2017/01/18",69.15200200000001],["2017/01/19",73.13965199999997],["2017/01/20",77.10624],["2017/01/21",81.127521],["2017/01/22",85.04579900000002],["2017/01/23",89.003693],["2017/01/24",92.817327],["2017/01/25",64.12351600000001],["2017/02/04",4.734462000000001],["2017/02/05",17.073667999999998],["2017/02/06",21.047981999999998],["2017/02/07",16.340846]]},{"name":"p2","data":[["2017/01/01",3.4],["2017/01/02",8.8],["2017/01/03",19.4],["2017/01/04",16.9],["2017/01/14",33.8],["2017/01/15",106.19999999999999],["2017/01/16",113.4],["2017/01/17",120.6],["2017/01/18",127.79999999999998],["2017/01/19",135.0],["2017/01/20",142.20000000000002],["2017/01/21",149.5],["2017/01/22",156.6],["2017/01/23",163.79999999999998],["2017/01/24",170.70000000000002],["2017/01/25",118.0],["2017/02/04",9.3],["2017/02/05",32.7],["2017/02/06",39.900000000000006],["2017/02/07",30.6],["2017/04/14",16.6]]},{"name":"p3","data":[["2017/01/01",0.090284],["2017/01/02",0.18148],["2017/01/03",0.36250400000000005],["2017/01/04",0.3223319999999999],["2017/01/14",0.629936],["2017/01/15",1.9858830000000007],["2017/01/16",2.117427],["2017/01/17",2.248054],["2017/01/18",2.3795070000000007],["2017/01/19",2.510548],["2017/01/20",2.6411759999999997],["2017/01/21",2.806806],["2017/01/22",2.9025950000000007],["2017/01/23",3.0344140000000004],["2017/01/24",3.156505],["2017/01/25",2.18585],["2017/02/04",0.200327],["2017/02/05",0.700937],["2017/02/06",0.8522410000000002],["2017/02/07",0.651459]]}];

  loadData(jsonData, '0', 'Column');

  // load json data
  function loadData(jsonData, id, chartType) {
    // create data table
    var dataTable = new google.visualization.DataTable();

    switch (chartType) {
      case 'Column':
        // add date column
        dataTable.addColumn('date', 'Date');
        var aggColumns = [];
        var viewColumns = [0, {
          calc: function (dt, row) {
            return formatDate.formatValue(dt.getValue(row, 0));
          },
          label: dataTable.getColumnLabel(0),
          type: 'string'
        }];

        $.each(jsonData, function(productIndex, product) {
          // add product column
          var colIndex = dataTable.addColumn('number', product.name);
          viewColumns.push(colIndex);
          aggColumns.push({
            aggregation: google.visualization.data.sum,
            column: colIndex+1,
            label: dataTable.getColumnLabel(colIndex),
            type: dataTable.getColumnType(colIndex)
          });

          // add product data
          $.each(product.data, function(dataIndex, data) {
            var rowIndex = dataTable.addRow();
            var rowDate = new Date(data[0]);
            dataTable.setValue(rowIndex, 0, new Date(rowDate.getFullYear(), rowDate.getMonth(), 1));
            dataTable.setValue(rowIndex, colIndex, data[1]);
          });
        });

        var dataView = new google.visualization.DataView(dataTable);
        dataView.setColumns(viewColumns);
        var groupData = google.visualization.data.group(
          dataView,
          [0, 1],
          aggColumns
        );
        var dataView = new google.visualization.DataView(groupData);
        dataView.hideColumns([0]);
        dataTable = dataView;
        break;
    }

    // draw chart
    $(window).resize(function () {
      drawChart(id, chartType, dataTable);
    });
    drawChart(id, chartType, dataTable);
  }

  // draw chart
  function drawChart(id, chartType, dataTable) {
    if (!charts.hasOwnProperty(id)) {
      charts[id] = new google.visualization.ChartWrapper({
        chartType: 'ColumnChart',
        containerId: 'chart-' + id,
        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 {
  height: 100%;
}
<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-0"></div>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)