javascript - 点击下载 Highcharts

Question

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

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

目前，我们有:

此图表将在单击时打开，但客户要求用户应该能够下载图表，而不是打开图表。

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