javascript - highcharts 可以导出图表和表格数据吗？

Question

我试图弄清楚 highcharts 是否可以执行以下操作：

渲染一个标准的水平条形图，它下面包含单独的表格数据（想象一个条形图下面有一个类似 html 的表格。）

用户将能够使用 highcharts 提供的 exporting.js 文件导出整个 svg。

这可能看起来很模糊，但我正在努力思考这个问题。我根本不熟悉 highcharts，但已经彻底查看了文档。据我了解，使用 highcharts 无法实现这样的事情，因为它的文本功能/选项对于表示数据表来说不是那么灵活。

任何可能的见解都会很棒，谢谢大家！

D.

score 4 · Accepted Answer

如果你查看 HighCharts 论坛，你可以看到一个 hack 来获得它。它不是很干净，但确实很神奇。如果您的数据表非常大，您可能需要考虑一次只显示部分数据（使用放大图表）。

score 0 · Accepted Answer

几年后偶然发现寻找相关的东西，但我也发现了这个 JSFiddle，它可能更接近于请求的内容，而不是上面的断开链接。

Highcharts.drawTable = function () {
    // SVG fun
};

window.chart = Highcharts.chart('container', {
    ...chartConfig
});

它使用系列数据在 SVG 中绘制表格。并不是说这很理想，但它确实适用于图像导出，而showTable 选项则不行。

Highcharts.chart('container', {
    ...chartConfig,
    exporting: {
        showTable: true
    }
});

第三个可能是最好的折衷方案是使用字幕 HTML 文本插入表格。

Highcharts.chart('container', {
    ...chartConfig,
    subtitle: {
        title: '<div>Anything goes</div>',
        useHTML: true
    }
});

在导出时为图表动态设置此项（允许您保留要在网页上显示的任何字幕）涉及调用setTitle 方法：

chart.setTitle({text: "New Title"});

2 回答 2