可以使用highcharts导出图表AND表数据

Can highcharts export a chart AND table data?

本文关键字：AND 数据 highcharts 可以使      更新时间：2023-09-26

我正试图弄清楚高图是否能做到以下几点：

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

用户可以使用highcharts提供的exporting.js文件导出整个svg。

这可能看起来很模糊，不过我正在仔细思考。我对高点一点也不熟悉，但我已经仔细查看了文档。据我所知，使用高图是不可能实现这样的功能的，因为它的文本功能/选项在表示数据表时没有那么灵活。

任何可能的见解都将是伟大的，感谢大家！

D。

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

几年后，我一直在寻找相关的东西，但我也发现了这个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"});
相关文章：