如何在StencilJS中使用HighCharts的正确方法？

Question

我已经将HighCharts与React一起使用，并且对于React-Highcharts-Wrapper来说非常简单

现在，我正在学习将Highcharts与StencilJS一起使用，但是无法使其正常工作，我真的不知道该怎么做。 （我是来自设计路径的编码器，所以我不是real程序员...）

这是我尝试过的，受到官方教程的启发：

import { Component, h } from "@stencil/core";
import * as Highcharts from "highcharts";

@Component({
  tag: "my-chart",
  styleUrl: "my-chart.scss",
  shadow: true,
})

export class MyChart {
  componentDidLoad() {
    var myChart = Highcharts.chart("container", {
      chart: {
        type: "bar",
      },
      title: {
        text: "Fruit Consumption",
      },
      xAxis: {
        categories: ["Apples", "Bananas", "Oranges"],
      },
      yAxis: {
        title: {
          text: "Fruit eaten",
        },
      },
      series: [
        {
          name: "Jane",
          type: "bar",
          data: [1, 0, 4],
        },
        {
          name: "John",
          type: "bar",
          data: [5, 7, 3],
        },
      ],
    });
  }

  render() {
    return <div id="container"></div>;
  }
}

有人可以指出正确的方向吗？

Answer 1

您正在使用称为Shadow DOM的功能，它将在shadowRoot节点后封装组件的模板。因此无法通过查询选择器访问.container div，Highcharts将无法找到它。

相反，您还可以传递对DOM元素的引用，并且可以使用任何元素上的ref道具从模板中获取此类引用。 e。

containerRef?: HTMLDivElement;

render() {
  return <div ref={el => this.containerRef = el} />;
}

然后您可以将其传递到Highchart创建代码中，但是您必须在componentDidLoad回调中执行此操作，因为那时只有容器引用可用。

componentDidLoad() {
  if (!this.containerRef) {
    return; // just a fail-safe
  }

  Highcharts.chart(this.containerRef, options);
}

然而，您似乎只想在组件中绘制图表，而没有其他任何东西，因此您也可以使用组件的宿主元素（即<my-chart>）作为容器。主机引用可以使用@Element装饰器检索，并且已经在componentWillLoad中可用。

import { h, Component, Element, Host } from '@stencil/core';
import * as Highcharts from 'highcharts';

@Component({ tag: 'my-chart', shadow: true })
export class MyChart {
  @Element() host: HTMLMyChartElement;

  chart: Highcharts.Chart; // only if you need a reference to the chart for later

  componentWillLoad() {
    this.chart = Highcharts.chart(this.host, options);
  }

  render() {
    return <Host />;
  }
}