时间戳

首页 > 解决方案 > 将 Highcharts（和模块）与 lit-element 一起使用

javascript - 将 Highcharts（和模块）与 lit-element 一起使用

问题描述

根据GitHub 问题，这是一个后续问题：

我想将 Highcharts 和一些模块与 Lit-Element 一起使用，并在导入 Highcharts 和模块时遇到困难。

如果我使用import 'highcharts';，我可以Highcharts在我的代码中完美地使用 -Object 。使用给定的解决方案 ( import * as Highcharts from 'highcharts';)，它不起作用。

任何给定的模块导入解决方案都不起作用：

import 'highcharts/modules/exporting'; // doesn't throw an error, but can't bind it to Highcharts

import HC_exporting from 'highcharts/modules/exporting'; // does throw a 'no named default export' error

import * as HC_exporting from 'highcharts/modules/exporting'; // throws 'TypeError: HC_exporting is not a function'

ld-application-actions.js:56 Uncaught (in promise) SyntaxError: The requested module '../../../../node_modules/highcharts/modules/exporting.js' does not provide an export named 'default'

那么是否有可能导入和使用Highcharts 及其模块？

疯狂的事情：我试图在 Stackblitz 上创建一个示例，但它确实有效：https ://stackblitz.com/edit/ic7f4z

这里有什么区别？那是因为 Stackblitz 使用 TypeScript 导入而我使用polyserve没有 TypeScript 吗？

更新：

我在 JSFiddle 上创建了相同的示例（请参阅https://jsfiddle.net/sebastianroming/uer59cnw/6/），这与我的机器上的相同：不起作用。随意取消注释注释行以获得控制台的输出。

谢谢！

标签： javascripthighchartspolymeres6-moduleslit-element

解决方案

可以像这样下载使用lit-element和polyserveHighcharts 及其模块：

import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';

组件代码：

import { LitElement, html } from 'lit-element';

import 'highcharts';
import 'highcharts/modules/exporting';
import 'highcharts/modules/boost'
import 'highcharts/highcharts-more';

class ChartTest extends LitElement {

  firstUpdated(changedProperties) {
    this._enableChart();
  }

  render() {
    return html`
      <div id='container' style='width:500px;height:300px;border: 1px red solid;'>sfsdfs</div>
    `;
  }

  _enableChart() {
    Highcharts.chart(this.shadowRoot.querySelector('#container'), {
      xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
        ]
      },
      series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
        type: 'column'
      }]
    });
  }

}
customElements.define('chart-test', ChartTest);

演示：

推荐阅读