全屏关闭 Highcharts 自定义按钮样式

Question

我在 angular 应用程序中使用 highcharts。在图表内，我放置了自定义按钮以将用户带到新页面。

问题是，当我全屏显示图表时，使用导出菜单，自定义按钮位置仅在原始位置。它不会随图表尺寸改变其位置，即如果图表尺寸从 500x500 增加到 1280x1000，则按钮不会相应移动

进入全屏前

全屏

我使用 event.render 将按钮放在图表上。我需要：

在全屏事件中再次渲染按钮并退出全屏事件。
将按钮的对齐方式更改为始终右上对齐（添加边距以不与导出按钮重叠）。
任何完全不同的东西，比如放弃编码

将按钮添加到图表的代码:

 public static donutChartOptions: Options{
     chart: {
          type: 'donut',
          events: {
              render(events) {
                   let chartVal = this;
                   chartVal.renderer
                   .button('View Full Report', 460, 8, (e) => {})
                   .attr({
                       zIndex: 3,
                   })
                   .on('click', function () {
                        window.location.href = '#/home/viewDistribution';
                   })
                  .add();
               }
             },
           }
         }

Answer 1

您可以使用存储在图表中的动态值在适当的位置创建按钮。例如：

  chart: {
    ...,
    events: {
      render(events) {
        const chart = this;
        const exportingBBox = chart.exportingGroup.getBBox();
        const x = exportingBBox.x - 10;
        const y = 6;

        if (!chart.customButton) {
          chart.customButton = chart.renderer
            .button('View Full Report')
            .attr({
              zIndex: 3,
              align: 'right'
            })
            .on('click', function() {
              window.location.href = '#/home/viewDistribution';
            })
            .add();
        }

        chart.customButton.attr({
          x,
          y
        });
      }
    }
  }

现场演示： http://jsfiddle.net/BlackLabel/2hoznsab/

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

全屏关闭 Highcharts 自定义按钮样式

Highcharts custom button styling off on full screen

javascript

angular

highcharts

customization