Смена темы с помощью highcharts-angular

Question

Я пытаюсь изменить тему Highcharts с помощью пакета highcharts-angular.Я попытался добавить тему в раздел scripts конфигурации angular.json, но это не работает.Я действительно не хочу копировать / вставлять всю тему и вручную вставлять ее в объект Highcharts, как показано на этой странице: https://www.highcharts.com/docs/chart-design-and-style/themes.

Кто-нибудь смог приятно изменить темы, используя highcharts-angular?

Answer 1

Спасибо @KacperMadej за это решение на github .

Чтобы загрузить тему, просто добавьте куда-нибудь в проект следующее:

import * as Highcharts from 'highcharts'; require('highcharts/themes/dark-blue')(Highcharts);

Answer 2

Фабрика тем теперь является экспортом по умолчанию highcharts/themes/<theme-name>, поэтому это будет работать:

import * as Highcharts from 'highcharts';
import theme from 'highcharts/themes/dark-unica';
theme(Highcharts);

Answer 3

Кажется, копировать / вставлять всю тему - единственный способ.Вы можете создать специальный сервис с определенными темами и импортировать конкретную тему в свой компонент диаграммы.Затем примените его в конструкторе:

  chartTheme = {
    colors: [
      "#058DC7",
      "#50B432",
      "#ED561B",
      "#DDDF00",
      "#24CBE5",
      "#64E572",
      "#FF9655",
      "#FFF263",
      "#6AF9C4"
    ],
    chart: {
      backgroundColor: "#efefef"
    },
    title: {
      style: {
        color: "red",
        font: 'bold 20px "Trebuchet MS", Verdana, sans-serif'
      }
    },
    subtitle: {
      style: {
        color: "blue",
        font: 'bold 10px "Trebuchet MS", Verdana, sans-serif'
      }
    }
  };

  constructor() {
    const theme = this.chartTheme;

    this.Highcharts.theme = theme;
    this.Highcharts.setOptions(theme);
  }

Демо: https://codesandbox.io/s/p9017x2q9x