谷歌图表将缩放的图像保存为PNG

Google charts save zoomed image as PNG

本文关键字：图像 保存 PNG 缩放 谷歌      更新时间：2023-09-26

我正在使用Google图表来创建折线图，并且正在使用 

explorer: {actions: ['dragToZoom', 'rightClickToReset']

以允许用户放大边界框。我希望能够将缩放的图像另存为 PNG。为此，我尝试在图表的左边缘和右边缘找到 HAxis 值，在图表的顶部和底部边缘找到 VAxis 值：

var cli = chart.getChartLayoutInterface();
var hl = cli.getHAxisValue(cli.getChartAreaBoundingBox().left);
var hr = cli.getHAxisValue(cli.getChartAreaBoundingBox().left + cli.getChartAreaBoundingBox().width);
var vt = cli.getVAxisValue(cli.getChartAreaBoundingBox().top);
var vb = ??

然后，我在我的选项中使用这些来使用这些限制来重新填充图表：

var options = {
    width: 1430,
    height: 563,
    hAxis: {
        title: 'X-Axis',
        viewWindow: { min: hl, max: hr}
    },
    explorer: {actions: ['dragToZoom', 'rightClickToReset'], keepInBounds: true, maxZoomIn: .01 },
    curveType: "function",
    vAxis: {
        logScale: log1, 
        title: "Y-Axis", 
        titleTextStyle: {color: '#0000FF'}, 
        textStyle: {color: '#0000FF'}, 
        baselineColor: '#0000FF', 
        viewWindow: { min: vb, max: vt}}
    },
    title: "Figure 1"
};
var chart = new google.visualization.LineChart(document.getElementById('plot'));
chart.draw(data, options);
drawpng = chart.getImageURI();
return drawpng;

我的左边缘、右边缘和上边缘的值工作正常，但我无法弄清楚如何确定底部边缘。我已经试过了

var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().top - cli.getChartAreaBoundingBox().height)

和

var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().height)

和

var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().height - cli.getChartAreaBoundingBox().top)

但这些都没有给我正确的价值。

有谁知道如何完成这项工作，或者保存放大图表的另一种方法？谢谢！

我让它使用

cli.getVAxisValue(cli.getChartAreaBoundingBox().top+cli.getChartAreaBoundingBox().height)

我没有意识到这个位置是从顶部计算的，而不是从底部计算的。

相关文章：