谷歌图表X轴每日日期不显示它堆叠的列 [英] google charts x axis daily date not show it stacked columns
本文介绍了谷歌图表X轴每日日期不显示它堆叠的列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用的是谷歌图表和堆积列，对于大数据集或小数据无法正常工作，在这里您可以检查它的工作代码，但没有获取堆积列数据，当我使用小数据集时，显示所有小宽度水平列。检查我的评论代码提前感谢您
让我知道如果你知道如何以不同的方式实施？
i想要一张图像如下图所示
< 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 =chartid =chart-0>< / div> '字符串'列，而'date'
建立数据表后，使用数据视图将日期转换为字符串
之后，您需要将数据分组到日期字符串中
请参阅以下工作片段...
谷歌.charts.load（'current'，{packages：['corechart']}）。then（function（）{//保存图表以重绘var charts = {}; var options = {isStacked：'true'，列：{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'}）; //获取数据var jsonData = [{name：p1，data：[[2017/01/01，1.539011]，[2017/01/02，4.22612]，[2017 / 01/03\" ，9.685247]，[ 2017年1月4日，8.535989]，[ 2017年1月14日，18.260888]，[ 2017年1月15日，57.279945]，[2017/01 / 16\" ，61.24776]，[ 2017年1月17日，65.12251399999998]，[ 2017年1月18日，69.15200200000001]，[ 2017年1月19日，73.13965199999997]，[ 二零一七年一月二十零日 ，77.10624]，[ 2017年1月21日，81.127521]，[ 2017年1月22日，85.04579900000002]，[ 2017年1月23日，89.003693]，[ 2017年1月24日，92.817327 ]，[ 2017年1月25日，64.12351600000001]，[ 2017年2月4日，4.734462000000001]，[ 2017年2月5日，17.073667999999998]，[ 2017年2月6日，21.047981999999998] [ 2017年2月7日，16.340846]]}，{ 名称： P2， 数据：[[ 2017年1月1日，3.4]，[ 2017年1月2日，8.8 ]，[ 2017年1月3日，19.4]，[ 2017年1月4日，16.9]，[ 2017年1月14日，33.8]，[ 2017年1月15日，106.19999999999999] [ 2017年1月16日，113.4]，[ 2017年1月17日，120.6]，[ 2017年1月18日，127.79999999999998]，[ 2017年1月19日，135.0]，[ 2017年1月20\" 日，142.20000000000002]，[ 2017年1月21日，149.5]，[ 2017年1月22日，156.6]，[ 2017年1月23日，163.79999999999998]，[2017 / 01/24\" ，170.70000000000 002]，[ 2017年1月25日，118.0]，[ 2017年2月4日，9.3]，[ 2017年2月5日，32.7]，[ 2017年2月6日，39.900000000000006] ，[ 2017年2月7日，30.6]，[ 2017年4月14日，16.6]]}，{ 名称： P3， 数据：[[ 2017年1月1日， 0.090284]，[ 2017年1月2日，0.18148]，[ 2017年1月3日，0.36250400000000005]，[ 2017年1月4日，0.3223319999999999]，[ 2017年1月14日，0.629936] ，[ 2017年1月15日，1.9858830000000007]，[ 2017年1月16日，2.117427]，[ 2017年1月17日，2.248054]，[ 2017年1月18日，2.3795070000000007]，[ 2017年1月19日，2.510548]，[ 二零一七年一月二十零日 2.6411759999999997]，[ 2017年1月21日，2.806806]，[ 2017年1月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'）; //加载json数据函数loadData（jsonData，id，chartType）{//创建数据表var dataTable = new google.visualization.DataTable（）; switch（chartType）{case'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）{//添加产品列var colIndex = dataTable.addColumn（'number'，product.name）; viewColumns.push（colIndex）; aggColumns.push（{aggregation：google。 visual.data.sum，列：colIndex + 1，标签：dataTable.getColumnLabel（colIndex），类型：dataTable.getColumnType（colIndex）}）; //添加产品数据$ .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;打破; } //绘制图表$（window）.resize（function（）{drawChart（id，chartType，dataTable）;}）; drawChart（id，chartType，dataTable）; } //绘制图表函数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）;图表[ID] .draw（）; }}）;
< ; margin：0px 0px 0px 0px;溢出：隐藏; 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 =chartid =chart-0>< / div>
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
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>
解决方案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 stringsee 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>
这篇关于谷歌图表X轴每日日期不显示它堆叠的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
