Использование CSS для настройки старших графиков в Ionic 4

Question

Я использую ионный 4 с Highcharts.Все работает отлично, за исключением того, что я не могу настроить диаграммы через css моего компонента.Я попробовал пару вещей, но не могу заставить его работать.

Что-нибудь, что я должен добавить в scss, чтобы применить его к графику?

Резюмеcomponent:

В моем component.ts:

import * as HighCharts from 'highcharts';

@Component({
    styleUrls: ['./component.scss'],    
    selector: 'my-component',
    templateUrl: 'component.html'
})

В моем component.html:

 <div id="container" style="display: block;"></div>

В моем component.scss:

   .highcharts-loading {
      background: silver;
    }
    .highcharts-loading-inner {
      color: blue;
    }

Answer 1

К сожалению, вы можете добавлять стили только глобально.Поэтому внутри angular-cli.json добавьте файл CSS для диаграммы - пример ниже chart-styles.css:

{
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets", "favicon.ico"],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "prefix": "app",
      "styles": ["styles.css", "chart-styles.css"],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]
}

Если вы хотите использовать только стили CSS для стилизации диаграммы, вы можете включитьstyled mode:

  chartOptions = {
    chart: {
      styledMode: true
    }
  }

Демонстрация:

• Режим стиля: https://codesandbox.io/s/cqxuh
• https://codesandbox.io/s/angular-3v41p

Документы:

• https://www.highcharts.com/docs/chart-design-and-style/style-by-css

Answer 2

в Highcharts вам нужно использовать свойство useHTML, чтобы все произошло. Я не знаком с ionic, но у меня была та же проблема, и следующее помогло

plotOptions: { series: { dataLabels: { useHTML: true, } } }