highcharts 导出带有工具提示和标签的highchartgraph

vsnjm48y 于 2023-04-06 发布在 Highcharts

关注(0)|答案(1)|浏览(125)

我试图将HighCharts图形导出为PDF。它似乎导出正确，但工具提示或任何类型的标签丢失。
我有2个图形的组合，圆形和线性进度条，显示每个系列的名称和进度。当我检查图形时，我可以看到一切完美，但一旦我将相同的图形转换为PDF，我想看到所有的工具提示和绘图，以便用户可以从PDF中识别值。
工具提示定义为

tooltip: {
useHTML: true,
shared: true,
formatter: function() {
  return '<i>' + this.points[0].key + '</i>: <b>' + Math.round(this.points[0].percentage) + '%</b>';
}

}，
这里是code snippet的图形。它有一个线性和圆形图，如下图所示。

在上面，我需要添加标记，表示什么数据和值。

highcharts

来源：https://stackoverflow.com/questions/75903270/export-highchartgraph-with-tooltips-and-labels

1条答案

按热度按时间

oaxa6hgo1#

您可以在exporting.chartOptions中定义导出设置并使用series.dataLabels来实现。这是基本示例，但dataLabels可以自由样式化：

exporting: {
    chartOptions: {
      plotOptions: {
        series: {
          dataLabels: {
            style: {
              textOutline: false
            },
            enabled: true,
            align: 'right',
            formatter: function() {
              if (this.series.name !== 'background filler') {
                return '<i>' + this.key + '</i>: <b>' + Math.round(this.percentage) + '%</b>';
              }
            }
          }
        }
      },
    }
  },

演示：https://jsfiddle.net/BlackLabel/o3Lyp8rn/
API参考：https://api.highcharts.com/highcharts/exporting.chartOptions

赞(0）回复(0）举报 2023-04-06

我来回答

highcharts 导出带有工具提示和标签的highchartgraph

1条答案

相关问题

热门标签

最新问答