将 HighCharts 与 StencilJS 一起使用的正确方法是什么？

Question

我已经将 HighCharts 与 React 结合使用，这对于 React-Highcharts-Wrapper

来说非常简单

现在我正在学习将 Highcharts 与 StencilJS 一起使用，但无法让它工作，我真的不知道该怎么做。（我是设计出身的程序员，所以我不是真正的程序员...）

这是我尝试过的，灵感来源于官方教程：

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 />;
  }
}

将 HighCharts 与 StencilJS 一起使用的正确方法是什么？

How is the proper way to use HighCharts with StencilJS?

javascript

highcharts

stenciljs