“视图全屏"菜单项未显示在 highcharts 6.2.0 的上下文菜单中

问题描述

我有一个 highchart 折线图，目前显示在 bootstrap 4 卡中.我希望它全屏显示，我目前知道 highchart 6.2.0 具有启用导出文件的选项，以便我可以使用导出上下文菜单.所以，我启用了它们，但showFullscreen"选项未显示在导出上下文菜单中.

I have a highchart line chart which currently displayed in bootstrap 4 card.I want it to displayed full screen, which I'm currently aware that highchart 6.2.0 has option to enabled exporting file, so that I can use the exporting context menu. so, I enabled them but "showFullscreen" option not showing in the exporting context menu.

我将 highchart 和导出模块导入到组件中.在文档 highchart 中，伙计们说我必须将 viewFullscreen 作为字符串包含到 menuItems 数组中.我也这样做了.但没有任何效果.

I imported highchart and exporting module to the component.in the documentation highchart guys says that I have to include viewFullscreen as string to the menuItems array. I also did that. but nothing work.

import { chart } from 'highcharts';
import * as Highcharts from 'highcharts/highcharts';
import * as HighchartsMore from 'highcharts/highcharts-more';
import * as HighchartsSolidGauge from 'highcharts/modules/solid-gauge';
import * as HighChartExport from 'highcharts/modules/exporting';


HighchartsMore(Highcharts);
HighchartsSolidGauge(Highcharts);
HighChartExport(Highcharts);


@Component({
  selector: 'app-line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css']
})
export class LineChartComponent implements OnInit, OnChanges {

  @ViewChild('chartTarget') chartTarget: ElementRef;
  @Input() data;
  @Input() lineColor;
  options: any;
  chart: Highcharts.ChartObject;

  constructor() { }

  ngOnInit() {
    this.drawLineChart();
  }

  ngOnChanges(changes: SimpleChanges) {
    if (this.chart && changes['data']) {
      this.drawLineChart();
    }
  }

  drawLineChart() {
    this.options = {
      chart: {
        scrollablePlotArea: {
          minWidth: 700
        },
        height: 230,
        zoomType: 'x'
      },
      title: {
        text: ''
      },
      credits: {
        enabled: false
      },
      xAxis: {
        gridLineWidth: 1,
        /*tickInterval: 7 * 24 * 3600 * 1000, // one week
        tickWidth: 0,*/
        labels: {
          align: 'left',
          x: 3,
          y: -3,
          enabled: false
        }
      },
      yAxis: [{ // left y axis
        title: {
          text: null
        },
        padding: 3,
        showFirstLabel: false,
        gridLineWidth: 1,
        /*labels: {
          align: 'left',
          x: -10
        }*/
      }],
      colors: this.lineColor,
      legend: {
        align: 'left',
        verticalAlign: 'bottom',
        borderWidth: 0
      },
      tooltip: {
        shared: true,
        crosshairs: true,
        headerFormat: ''
      },
      exporting: {
        enabled: true,
        menuItemDefinitions: {
          // Custom definition
        },
        buttons: {
          contextButton: {
            menuItems: ['viewFullscreen']
          }
        }
      },
      plotOptions: {
        series: {
          cursor: 'pointer',
          marker: {
            enabled: false
          }
        }
      },
      series: this.data
    };
    this.chart = chart(this.chartTarget.nativeElement, this.options as any);
  }

}

我点击了这个链接https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/exporting/menuitemdefinitions/

但是当我点击那个汉堡包图标时，除了viewFullscreen"选项之外的所有其他选项都不起作用.

but when I clicked that hamburger icon every other options showing except "viewFullscreen" option didn't work.

推荐答案

要将自定义按钮添加到上下文菜单，您必须将其添加到 exporting.menuItemDefinitions 和 exporting.buttons.contextButton.menuItems 数组.请注意，全屏需要加载额外的模块:modules/full-screen.

To add a custom button to context menu you have to add it to exporting.menuItemDefinitions and also exporting.buttons.contextButton.menuItems array. Note, that fullscreen requires an additional module to be loaded: modules/full-screen.

代码:

Highcharts.chart('container', {
  exporting: {
    menuItemDefinitions: {
      fullscreen: {
        onclick: function() {
          Highcharts.FullScreen.prototype.init(this.renderTo);
        },
        text: 'Full screen'
      }
    },
    buttons: {
      contextButton: {
        menuItems: ['downloadPNG', 'downloadSVG', 'separator', 'fullscreen']
      }
    }
  },
  series: [{
    data: [
      43934,
      52503,
      57177,
      69658,
      97031,
      119931,
      137133,
      154175
    ]
  }],
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<div id="container"></div>

演示:

• https://jsfiddle.net/BlackLabel/qydgxs12/

Angular 演示:

• https://codesandbox.io/s/73lomvnqk0

API 参考:

• https://api.highcharts.com/highcharts/exporting.buttons.contextButton.menuItems

https://api.highcharts.com/highcharts/exporting.menuItemDefinitions

这篇关于“视图全屏"菜单项未显示在 highcharts 6.2.0 的上下文菜单中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！