导出带有工具提示和标签的图表

Question

我正在尝试将 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>';
}

},

这里是图表的代码片段。它有一个线性图和一个圆形图，如下图所示。

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

Answer 1

您可以在

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

---

编辑：

对于 solidgauge 系列，您需要使用 Highchart SVG 渲染器渲染标签。这是例子：

  chart: {
    type: 'solidgauge',
    events: {
      render() {
        this.series.forEach(series => {
          if (!series.label) {
            series.label = this.renderer
              .label(series.data[0].y.toString(), 0, 0, 'rect', 0, 0, true, true)
              .css({
                fontWeight: 'bold',
                fontSize: '10px'
              })
              .add(this.series[1].group);
          }
          series.label.translate(
            this.chartWidth / 2 - series.label.width - this.plotLeft / 2,
            this.plotHeight / 2 + series.points[0].shapeArgs.innerR + this.plotTop / 2
          );
        })
      }
    }
  },

API参考： https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

演示： https://jsfiddle.net/BlackLabel/8n9kfz0c/