有没有办法获取谷歌折线/面积图中的值范围,即当前正在查看的图表的开始和结束索引,以发送到 API 以获取下一个值。 例如,我有一个长度为 20 点的数据点,我能够在图表上看到 5 到 15 个点,其中 1 到 5 个点隐藏在左侧,15 到 20 个点隐藏在右侧。 我现在的要求是,当我向左平移时,我需要最左边的元素时间范围来调用API来填充历史数据,同样,当我向右平移时,我需要最右边的元素时间范围来调用API以获得下一个级别数据的。 为了放大和缩小,我需要最左边和最右边的元素来调用该范围内的 API。 有人可以帮我解决这个问题吗?
最佳答案
您可以使用几种方法...
1) 如果您想要数据表中的最小值和最大值...
getColumnRange(columnIndex)
- Returns an object with properties formin
andmax
.
在第一个数据表列上使用上述方法来获取 x 轴上的最小值和最大值,例如
var xAxisRange = data.getColumnRange(0);
<小时/>
2) 如果您想要图表可见范围的最小值和最大值...
首先,获取图表的布局...
getChartLayoutInterface()
- Returns an object with info about the placement of the chart.
var chartLayout = chart.getChartLayoutInterface();
然后获取图表区域边界...
getChartAreaBoundingBox()
- Returns an object with properties forleft
,top
,width
, andheight
of the chart.
var chartBounds = chartLayout.getChartAreaBoundingBox();
然后使用以下方法获取图表可见范围的值...
getHAxisValue(position)
- Returns the logical horizontal value atposition
.
var minValue = chartLayout.getHAxisValue(chartBounds.left);
var maxValue = chartLayout.getHAxisValue(chartBounds.left + chartBounds.width);
注意:使用上述方法之前需要等待图表的'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>
关于javascript - 如何获取谷歌折线图/面积图中的图形范围,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49489463/