时间戳

首页 > 解决方案 > 在 Angular 8 应用程序中使用 HighCharts styledMode

angular - 在 Angular 8 应用程序中使用 HighCharts styledMode

问题描述

我正在使用 highcharts-angular v2.4.0 和 highcharts v7.1.2 开发 Angular 8 应用程序

我在我的打字稿chartOptions中将图表styledMode设置为true，并将以下内容放在组件scss文件中

.highcharts-pie-series.highcharts-legend-item.highcharts-color-0 {
    text {
        font-size: 50px;
    }
}

我已阅读 Highcharts 上有关应用主题或覆盖样式的文章，但我尝试的任何操作都不会对生成的饼图或图例产生任何影响。我错过了什么？

标签： angularhighcharts

解决方案

不幸的是，当使用样式模式时，您必须全局添加样式。

在里面angular-cli.json添加图表样式的 CSS 文件（chart-styles.css 和 theme.css 下面）：

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

演示：

推荐阅读