在Highcharts中,如何为多棱锥图中的每个棱锥设置标题

In Highcharts, how to set up title for each pyramid in a multi-pyramid chart

本文关键字:标题 设置 Highcharts      更新时间:2023-09-26

场景是,一个动态的多棱锥图,棱锥数字、棱锥位置、屏幕大小和其他参数都可能不同。我正在寻找一种在每个金字塔顶部显示系列名称作为标题的方法。

我已经找到了"如何在多饼图中为每个饼图设置标题",通过扩展当前库:

Highcharts.seriesTypes.pie.prototype.setTitle = function (titleOption) {
        var chart = this.chart,
            center = this.center || (this.yAxis && this.yAxis.center),
            labelBox,
            box,
            format;
        if (center && titleOption) {
            var centerX = center[0],
                centerY = center[1],
                diameter = center[2];
            box = {
                x: chart.plotLeft + centerX - 0.5 * diameter,
                y: chart.plotTop + centerY - 0.5 * diameter,
                width: diameter,
                height: diameter
            };
            format = titleOption.text || titleOption.format;
            format = Highcharts.format(format, this);
            if (this.title) {
                this.title.attr({
                    text: format
                });
            } else {
                this.title = this.chart.renderer.label(format)
                    .css(titleOption.style)
                    .add();
            }
            labelBox = this.title.getBBox();
            titleOption.width = labelBox.width;
            titleOption.height = labelBox.height;
            this.title.align(titleOption, null, box);
        }
    };

但我不能把类似的方法应用于金字塔。因此,我的问题是,在一个有多个金字塔的金字塔图中,有没有办法为每个金字塔设置标题?

这是一把小提琴:https://jsfiddle.net/scottszb1987/hsbepxo5/

将此选项添加到您的图表中应该与将该选项添加到饼图中几乎相同。

  Highcharts.seriesTypes.pyramid.prototype.setTitle = function(titleOption) {
    var chart = this.chart,
      center = this.center || (this.yAxis && this.yAxis.center),
      labelBox,
      box,
      format;
    if (center && titleOption) {
      var centerX = center[0],
        centerY = center[1],
        diameter = center[2];
      centerY < 0 ? 2 * diameter : centerY
      box = {
        x: chart.plotLeft + centerX - 0.5 * diameter,
        y: centerY - 0.5 * diameter,
        width: diameter,
        height: diameter
      };
      format = titleOption.text || titleOption.format;
      format = Highcharts.format(format, this);
      if (this.title) {
        this.title.attr({
          text: format
        });
      } else {
        this.title = this.chart.renderer.label(format)
          .css(titleOption.style)
          .add();
      }
      labelBox = this.title.getBBox();
      titleOption.width = labelBox.width;
      titleOption.height = labelBox.height;
      this.title.align(titleOption, null, box);
    }
  };

我认为这个问题与Highcharts的小错误有关,即错误计算金字塔图的中心位置。在这里,您可以在Highcharts github上找到有关此问题的信息:https://github.com/highcharts/highcharts/issues/5500

在这里,您可以看到setTitle由于这个问题而部分工作:http://jsfiddle.net/hsbepxo5/1/

我认为,作为一种变通方法,您可以考虑使用renderer.text,而不是在图表中添加新功能:http://api.highcharts.com/highcharts#Renderer.text

致问候,