Использование Highcharts (и модулей) с lit-element - PullRequest
Новая
       58

Использование Highcharts (и модулей) с lit-element

1 голос
/ 27 июня 2019

Согласно 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/) и здесь то же самое, что и на моей машине: не работает. Не стесняйтесь раскомментировать закомментированные строки, чтобы получить вывод консоли.

Спасибо!

Ответы [ 3 ]

3 голосов
/ 28 июня 2019

Используя 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);

Демо-версия:

0 голосов
/ 27 июня 2019

Согласно документации, экспортируемая библиотека называется Exporting: 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

0 голосов
/ 27 июня 2019

Ваш tsconfig.json должен включать: 

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

См .: https://www.typescriptlang.org/docs/handbook/compiler-options.html

После того, как TypeScript настроен таким образом, должно работать следующее: 

import * as HC_exporting from 'highcharts/modules/exporting';
...