Onclick下载高潮图

Question

根据所选选项和点击链接，将生成图表。为此，我们使用了highcharts。但要求是用户应该能够从点击链接下载图表。

现在用户，选择该选项，然后从点击用户生成图表，然后从图表用户可以选择下载图表。

目前，我们有：

此图表将打开onClick，但客户要求不是打开图表用户应该能够下载图表。

Answer 1

正如我在评论中所说，你不能只是在没有首先渲染图表或者缓存渲染图表的图像并将其存储在服务器上的情况下下载图表。

我提出的解决方案是CSS和Highcharts API的结合。

您可以使用HighCharts库中内置的exportChart功能，并定义您想要图像的格式。 可能的值包括image/png，image/jpeg，application/pdf和image/svg+xml。

诀窍是通过在实际图表上设置visibility: hidden或display: none来隐藏页面上某个位置的图表。这样用户就不会看到图表了，但实际上你会生成一个并使用它来获取图像。

JS示例：

var chart = Highcharts.chart('container', {

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
    }]

});

function downloadJPG(){
    chart.exportChart({type:"image/jpeg"});
}

function downloadPNG(){
    chart.exportChart({type:"image/png"});
}

Full Example JSFiddle