将Highcharts(和模块)与亮元素一起使用

时间:2019-06-27 08:17:06

标签: javascript highcharts polymer es6-modules lit-element

根据GitHub Issue,这是一个后续问题:

我想将Highcharts和某些模块与Lit-Element一起使用,并在导入Highcharts和模块时费劲。

如果使用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'
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/),这与我的计算机上的示例相同:不起作用。随意取消注释行的注释,以获取控制台的输出。

谢谢!

4 个答案:

答案 0 :(得分:2)

使用lit-elementpolyserve 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);

演示:

答案 1 :(得分:0)

您的<input type="radio"><input type="radio"><input type="radio"><input type="radio"><input type="radio">需要包括:

tsconfig.json

请参阅:https://www.typescriptlang.org/docs/handbook/compiler-options.html

以这种方式配置TypeScript后,以下应该起作用:

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

答案 2 :(得分:0)

根据文档,导出库称为“导出”: https://api.highcharts.com/class-reference/#toc7

import Highcharts from 'highcharts';
// Alternatively, this is how to load Highstock. Highmaps and Highcharts Gantt are similar.
// import Highcharts from 'highcharts/highstock';

// Load the exporting module.
import Exporting from 'highcharts/modules/exporting';
// Initialize exporting module. (CommonJS only)
Exporting(Highcharts);

// Generate the chart
Highcharts.chart('container', {
  // options - see https://api.highcharts.com/highcharts
});

由于您使用的是Lit Element,所以我假设您还安装了Webpack,这使您可以不同地使用它,如下所示: https://gist.github.com/jon-a-nygaard/f22ade93209277eea5b57c0f6ca51ea7

答案 3 :(得分:0)

您也可以使用highcharts webcomponent。这是对highcharts的方便包装。 (它在内部使用Lit实现)