Vaadin 14和Highcharts集成

Question

我有一个基于vaadin14的项目，带有polymer3组件。
我在不使用嵌入式vaadin图表的情况下为Highcharts Highstock组件创建了一个小型包装器。

现在，我需要添加一个库存工具面板以允许在图表上绘制。
所有需要的.js和.css似乎是根据手册添加的，因为图表与Stock-Tools面板一起正确显示。
我可以看到子菜单，更改工具等。

但是我无法在图表上绘制任何内容。
似乎工具按钮单击并未以绘图模式转动图表（Active Button或HighCharts-Draw-Mode未应用）。

就我尝试通过NPM从8到10更新到10的HighCharts版本并不重要。

有人知道库存工具事件不起作用的原因吗？

提前致谢。

带有一些切割的聚合物组件代码如下：

import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
import 'highcharts/es-modules/masters/modules/hollowcandlestick.src.js';
import 'highcharts/es-modules/masters/modules/data.src.js';
import 'highcharts/es-modules/masters/modules/debugger.src.js';
import 'highcharts/es-modules/masters/modules/accessibility.src.js';
import 'highcharts/es-modules/masters/modules/boost.src.js';
import 'highcharts/es-modules/masters/indicators/indicators-all.src.js';
import 'highcharts/es-modules/masters/modules/drag-panes.src.js';
import 'highcharts/es-modules/masters/modules/price-indicator.src.js';
import 'highcharts/es-modules/masters/modules/full-screen.src.js';
import 'highcharts/es-modules/masters/modules/annotations-advanced.src.js';
import 'highcharts/es-modules/masters/modules/stock-tools.src.js';
import 'highcharts/es-modules/masters/modules/heikinashi.src.js';

class StockChartComponent extends PolymerElement {
  static get template() {
    return html`
    <style include="shared-styles shared-chart-styles">
        :host { 
            border: 1px solid red;
            width: 100%;
            height: 100%;
            display: block;
            padding: 1em;
        }
    #container { border: 1px solid blue; }

    </style>
    
    <div class='chart stock-chart' id='container'> </div>
            
    `;
  }
  

  static get is() {
    return 'stock-chart-component';
  }
 
  connectedCallback() {
        super.connectedCallback();

  }
/**this method is called after some initialization on the server-side via executeJS(...) **/
onStockChartUpdate(options) {
    var container = this.shadowRoot.querySelector("#container");
    if (Highcharts && options && container) {
        Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlcv.json', function (data) {

  // split the data set into ohlc and volume
  var ohlc = [],
    volume = [],
    dataLength = data.length,
    i = 0;

  for (i; i < dataLength; i += 1) {
    ohlc.push([
      data[i][0], // the date
      data[i][1], // open
      data[i][2], // high
      data[i][3], // low
      data[i][4] // close
    ]);

    volume.push([
      data[i][0], // the date
      data[i][5] // the volume
    ]);
  }

  Highcharts.stockChart(container, {
    yAxis: [{
      labels: {
        align: 'left'
      },
      height: '80%',
      resize: {
        enabled: true
      }
    }, {
      labels: {
        align: 'left'
      },
      top: '80%',
      height: '20%',
      offset: 0
    }],
    tooltip: {
      shape: 'square',
      headerShape: 'callout',
      borderWidth: 0,
      shadow: false,
      positioner: function (width, height, point) {
        var chart = this.chart,
          position;

        if (point.isHeader) {
          position = {
            x: Math.max(
              // Left side limit
              chart.plotLeft,
              Math.min(
                point.plotX + chart.plotLeft - width / 2,
                // Right side limit
                chart.chartWidth - width - chart.marginRight
              )
            ),
            y: point.plotY
          };
        } else {
          position = {
            x: point.series.chart.plotLeft,
            y: point.series.yAxis.top - chart.plotTop
          };
        }

        return position;
      }
    },
    series: [{
      type: 'ohlc',
      id: 'aapl-ohlc',
      name: 'AAPL Stock Price',
      data: ohlc
    }, {
      type: 'column',
      id: 'aapl-volume',
      name: 'AAPL Volume',
      data: volume,
      yAxis: 1
    }],
    responsive: {
      rules: [{
        condition: {
          maxWidth: 800
        },
        chartOptions: {
          rangeSelector: {
            inputEnabled: false
          }
        }
      }]
    }
  });
});
}
}  
}
customElements.define(StockChartComponent.is, StockChartComponent);