简体   繁体   中英

Google charts save zoomed image as PNG

I'm using Google Charts to create a line chart, and I'm using

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

to allow the user to zoom in on a bounding box. I'd like to be able to save the zoomed image as a PNG. To do so, I'm trying to find the HAxis values at the left and right edges of the chart and the VAxis values at the top and bottom edges of the chart:

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 = ??

Then I'm using these in my options to replot the chart with these limits:

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;

My values for the left, right, and top edges are working correctly, but I can't figure out how to determine the bottom edge. I've already tried

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

and

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

and

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

but none of these are giving me the correct value.

Does anyone know how to make this work, or another way of saving the zoomed in chart? Thanks!

I got it to work using

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

I hadn't realized that the position was being calculated from the top, not the bottom.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM