Javascript 使用带lit元素的Highcharts（和模块）

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

我想使用Highcharts和一些模块，在导入Highcharts和模块的过程中使用Light元素和挣扎

如果我使用

import'highcharts'，我可以完美地使用代码中的
Highcharts
-对象。对于给定的解决方案（
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'

那么，是否有可能导入并使用高图及其模块

疯狂的事情：我试着在Stackblitz上创建一个例子，但它奏效了：

这里有什么区别？这是因为Stackblitz使用TypeScript导入，而我使用不带TypeScript的
polyserve

更新：

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);

我在JSFIDLE上创建了相同的示例（请参阅），这里的示例与我的机器上的示例相同：不工作。可以随意取消注释注释注释行，以获得控制台的输出

谢谢
 您的
tsconfig.json
需要包括：

"esModuleInterop"             : true,
"allowSyntheticDefaultImports": true,

见：

以这种方式配置TypeScript后，以下各项应能正常工作：


import*作为HC_从“highcharts/modules/exporting”导出根据文档，导出库称为导出：

由于您使用的是Lit元素，我假设您也安装了Webpack，这允许您以不同的方式使用它，如图所示：
使用
lit element
和
polyserve
Highcharts及其模块可按如下方式下载：

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);

从'lit element'导入{LitElement，html}；
输入"海图";；
导入“海图/模块/导出”；
导入“highcharts/modules/boost”
导入“高图表/高图表更多”；
类ChartTest扩展了LitElement{
首次更新（更改属性）{
这是。_enableChart（）；
}
render（）{
返回html`
SFSDF
`;
}
_enableChart（）{
Highcharts.chart（this.shadowRoot.querySelector（“#container”）{
xAxis：{
类别：[‘一月’、‘二月’、‘三月’、‘四月’、‘五月’、‘六月’，
‘七月’、‘八月’、‘九月’、‘十月’、‘十一月’、‘十二月’
]
},
系列：[{
数据：[29.9,71.5,106.4,129.2,144.0,176.0,135.6148.5,216.4194.1,95.6,54.4]，
类型：“列”
}]
});
}
}
自定义元素。定义（'chart-test'，ChartTest）；

演示：

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);



您也可以使用。这是一个方便的高图表包装。（其内部使用Lit实现）
您是否尝试从“Highcharts”导入HighchartsHighcharts.chart（'id\u chart'，{option Object}）
？我用我的项目和它做了works@DucHong是的，我试过了，但是：
请求的模块'../../../../../../node\u modules/highcharts/highcharts.js'没有提供名为'default'的导出
谢谢-但是我没有使用Typescript，所以我没有tsconfig。谢谢这个提示-但是我已经无意中发现了，但是我没有使用webpack，tho。我用的是
polyserve
，没有别的。太棒了-没想到会那么容易！谢谢你的帮助！