限制范围仅在Google图表中显示x个月

脆弱的窗户

我试图限制折线图中显示的日期范围。

当前图表:

在此处输入图片说明

我想将显示的结果数限制为从今天(当前日期)到最近3个月,但是我不知道该怎么做。我已经ChartRangeFilter这里研究过使用此类帖子,但这需要用户进行过滤;我希望用户加载图表后立即限制结果。

我已经考虑过(不确定如何实现这些功能):

  1. Google图表中显示刻度线限制为最后3个刻度线
  2. 使用Python过滤BigQuery JSON结果的最后3个月(将结果发送到Google图表之前)

JSON:

{
"rows": [{
    "c": [{
        "v": "2010-10"
    }, {
        "v": 5
    }]
}, {
    "c": [{
        "v": "2012-11"
    }, {
        "v": 43
    }]
}, {
    "c": [{
        "v": "2016-12"
    }, {
        "v": 59
    }]
}, {
    "c": [{
        "v": "2016-01"
    }, {
        "v": 50
    }]
}, {
    "c": [{
        "v": "2011-02"
    }, {
        "v": 37
    }]
}, {
    "c": [{
        "v": "2016-03"
    }, {
        "v": 38
    }]
}, {
    "c": [{
        "v": "2016-04"
    }, {
        "v": 46
    }]
}, {
    "c": [{
        "v": "2016-05"
    }, {
        "v": 45
    }]
}, {
    "c": [{
        "v": "2016-06"
    }, {
        "v": 22
    }]
}, {
    "c": [{
        "v": "2011-07"
    }, {
        "v": 10.0
    }]
}, {
    "c": [{
        "v": "2011-08"
    }, {
        "v": 50
    }]
}, {
    "c": [{
        "v": "2016-09"
    }, {
        "v": 7
    }]
}, {
    "c": [{
        "v": "2016-10"
    }, {
        "v": 14
    }]
}, {
    "c": [{
        "v": "2016-11"
    }, {
        "v": 55
    }]
}],
"cols": [{
    "type": "string",
    "id": "SalesDate",
    "label": "SaleDate"
}, {
    "type": "number",
    "id": "InventoryPercent",
    "label": "InventoryPercent"
}]
}

所需结果:

//via Python - returns only these values to be displayed in chart
"v": "2016-09"    "v": 7
"v": "2016-10"    "v": 14
"v": "2016-11"    "v": 55

所需图表:

在此处输入图片说明


我尝试了第一种方法,但它不起作用:

JavaScript:

$.get('/sales_data', function(response) {
    salesData = JSON.parse(response);
    // Set a callback to run when the Google Visualization API is loaded.
    google.charts.setOnLoadCallback(drawChart);
});

function drawChart() {
    //3 ticks for tick count
    function formatMonth() {
        var today = newDate();
        var salesMonth;
        for (var x = 2; x >= 0; x--) {
        salesMonth = moment(new Date(today.getFullYear(), today.getMonth() - x).format("YYYY-MM");
        console.log(salesMonth);
        }
    }

    var chartOptions = {
        vAxis: {
            minValue: 0,
            maxValue: 100,
            interpolateNulls: true,
            visible: true,
            gridlines: { count: 5},
            ticks: { //tick count - limit to last 3 months
                format: function() {
                return formatMonth();
            }
        }

如何限制显示范围只能显示最近3个月?

白帽

过滤服务器/源上的数据可能更有意义,
这将减少客户端处理的数据量

但是,Google确实提供了在绘制之前处理过滤的方法

您可以结合使用setRowsgetFilteredRows方法来创建DataView

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

首先,根据json创建一个DataView,将第一列转换为实际日期

然后setRowsgetFilteredRows用来限制最近3个月

然后将DataView中每一行的日期用于hAxis刻度

google.charts.load('current', {
  callback: drawChart,
  packages: ['corechart', 'table']
});

function drawChart() {
  var dataTable = new google.visualization.DataTable({
    "rows": [{
        "c": [{
            "v": "2010-10"
        }, {
            "v": 5
        }]
    }, {
        "c": [{
            "v": "2012-11"
        }, {
            "v": 43
        }]
    }, {
        "c": [{
            "v": "2016-12"
        }, {
            "v": 59
        }]
    }, {
        "c": [{
            "v": "2016-01"
        }, {
            "v": 50
        }]
    }, {
        "c": [{
            "v": "2011-02"
        }, {
            "v": 37
        }]
    }, {
        "c": [{
            "v": "2016-03"
        }, {
            "v": 38
        }]
    }, {
        "c": [{
            "v": "2016-04"
        }, {
            "v": 46
        }]
    }, {
        "c": [{
            "v": "2016-05"
        }, {
            "v": 45
        }]
    }, {
        "c": [{
            "v": "2016-06"
        }, {
            "v": 22
        }]
    }, {
        "c": [{
            "v": "2011-07"
        }, {
            "v": 10.0
        }]
    }, {
        "c": [{
            "v": "2011-08"
        }, {
            "v": 50
        }]
    }, {
        "c": [{
            "v": "2016-09"
        }, {
            "v": 7
        }]
    }, {
        "c": [{
            "v": "2016-10"
        }, {
            "v": 14
        }]
    }, {
        "c": [{
            "v": "2016-11"
        }, {
            "v": 55
        }]
    }],
    "cols": [{
        "type": "string",
        "id": "SalesDate",
        "label": "SaleDate"
    }, {
        "type": "number",
        "id": "InventoryPercent",
        "label": "InventoryPercent"
    }]
    }
  );
  dataTable.sort([{column: 0, desc: true}]);

  var datePattern = 'yyyy-MM';
  var formatDate = new google.visualization.DateFormat({pattern: datePattern});

  var dataView = new google.visualization.DataView(dataTable);
  dataView.setColumns([
    // date column
    {
      calc: function (dt, row) {
        var dateParts = dt.getValue(row, 0).split('-');
        var dateValue = new Date(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, 1);
        return {
          v: dateValue,
          f: formatDate.formatValue(dateValue)
        }
      },
      type: 'date',
      label: dataTable.getColumnLabel(0)
    },
    // inventory
    1
  ]);

  var today = new Date();
  var last3Months = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());

  dataView.setRows(dataView.getFilteredRows([{
    column: 0,
    minValue: last3Months
  }]));

  var hAxisTicks = [];
  for (var i = 0; i < dataView.getNumberOfRows(); i++) {
    hAxisTicks.push(dataView.getValue(i, 0));
  }

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(dataView, {
    hAxis: {
      format: datePattern,
      ticks: hAxisTicks
    }
  });

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(dataView);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<div id="table_div"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在Google图表中设置x轴范围

来自分类Dev

如何限制高位图表中x或y值的范围?

来自分类Dev

仅在 amchart 中显示过去 2 个月

来自分类Dev

如何仅在我的日历中显示上个月?

来自分类Dev

图表仅在一个图表中显示数据,而在另一个图表中不显示

来自分类Dev

图表仅在一个图表中显示数据,而在另一个图表中不显示

来自分类Dev

如何使用图表(IOS)在X轴上显示每个月

来自分类Dev

Google图表仅在图例中隐藏了一些系列

来自分类Dev

Google图表:工具提示中的图表未显示

来自分类Dev

在Google图表中显示零值注释

来自分类Dev

数据未显示在Google图表中

来自分类Dev

在Google图表hAxis中显示月份

来自分类Dev

无法在Angular中显示Google图表

来自分类Dev

Google图表未在Snappy PDF中显示

来自分类Dev

在Google图表中显示零值注释

来自分类Dev

数据未显示在Google图表中

来自分类Dev

在Google图表中显示mongodb结果

来自分类Dev

在Google图表中显示JSON正文

来自分类Dev

如何更改Google图表中的X指标?

来自分类Dev

Highcharts在日期时间图表中显示错误的月份(下个月)

来自分类Dev

Google Map仅在Firefox中显示

来自分类Dev

Vega-Lite图表X轴显示在新年开始后的一个月不显示

来自分类Dev

如何从Google Spreadsheets的图表范围中删除空白日期?

来自分类Dev

在Google图表中设置条形图的基线和范围

来自分类Dev

上个月,在Google表格中显示月份名称

来自分类Dev

Google图表在x轴上显示曲折标签

来自分类Dev

Google图表未显示x和y图例

来自分类Dev

我想显示所有行,但仅在高图表中显示其中之一的图例

来自分类Dev

Google图表未显示

Related 相关文章

热门标签

归档