有没有办法获得google line / area chart中的值范围,即。当前正在查看的图表的开始和结束索引,以便发送到API以获取下一个值。 例如,我有一个长度为20分的数据点,我能够在图表上看到5到15个点,其中1到5隐藏在左侧,15到20隐藏在右侧。 我现在的要求是,当我向左平移时,我需要最左边的元素时间范围来调用API来填充历史数据,就像我向右平移时一样,我需要最合适的元素时间范围来调用API以获得下一个级别数据的。 对于放大和缩小,我需要最左边和最右边的元素来调用该范围内的API。 有人请帮帮我吗?
答案 0 :(得分:1)
您可以使用几种方法......
1)如果你想要min&数据表中的最大值......
getColumnRange(columnIndex)
- 返回包含min
和max
属性的对象。
在第一个数据表列上使用上述方法得到min& x轴上的最大值,例如
var xAxisRange = data.getColumnRange(0);
2)如果你想要min&图表可见范围的最大值......
首先,获取图表的布局......
getChartLayoutInterface()
- 返回一个对象,其中包含有关图表位置的信息。
var chartLayout = chart.getChartLayoutInterface();
然后得到图表区域边界...
getChartAreaBoundingBox()
- 返回一个对象,其中包含图表的left
,top
,width
和height
的属性。
var chartBounds = chartLayout.getChartAreaBoundingBox();
然后使用以下方法获取图表可见范围的值...
getHAxisValue(position)
- 返回position
处的逻辑水平值。
var minValue = chartLayout.getHAxisValue(chartBounds.left);
var maxValue = chartLayout.getHAxisValue(chartBounds.left + chartBounds.width);
note :在使用上述方法之前需要等待图表的'ready'
事件......
请参阅以下工作代码段,其中包含两种方法的示例...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var xAxisRange = data.getColumnRange(0);
console.log('min data table value: ' + xAxisRange.min);
console.log('max data table value: ' + xAxisRange.max);
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
var options = {
explorer: {actions: ['dragToZoom', 'rightClickToReset']},
legend: {
position: 'top'
},
height: 400
};
google.visualization.events.addListener(chart, 'ready', getZoom);
google.visualization.events.addListener(chart, 'click', getZoom);
container.addEventListener('contextmenu', getZoom, false);
function getZoom() {
var chartLayout = chart.getChartLayoutInterface();
var chartBounds = chartLayout.getChartAreaBoundingBox();
var minVisible = chartLayout.getHAxisValue(chartBounds.left);
var maxVisible = chartLayout.getHAxisValue(chartBounds.left + chartBounds.width);
console.log('min visible range: ' + minVisible);
console.log('max visible range: ' + maxVisible);
}
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>