使用 css 自定义 Ionic 4 中的图表

Question

我在 Highcharts 中使用 ionic 4。除了我无法通过我的组件 css 自定义图表外，一切都运行良好。我尝试了一些方法，但无法正常工作。

我应该在 scss 中添加什么以使其应用于图表吗？

组件摘要：

在我的 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

在 Highcharts 中，您需要使用 useHTML 属性来实现。我对 ionic 不熟悉，但我遇到了同样的问题，以下内容对我有所帮助

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

Answer 2

遗憾的是，您只能在全局范围内添加样式。所以在 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

使用 css 自定义 Ionic 4 中的图表

Using css to customise highcharts in Ionic 4

sass

highcharts

ionic4