Question

我正在尝试使用highcharts-angular包来更改Highcharts主题。我尝试将主题添加到scripts配置的angular.json部分中，但这不起作用。我真的不想复制/粘贴整个主题，然后按照此页面https://www.highcharts.com/docs/chart-design-and-style/themes手动将其注入到Highcharts对象中。

有人能使用highcharts-angular很好地更改主题吗？

Answer 1

感谢@KacperMadej在github上提供此解决方案。

要加载主题，只需在项目中的某处添加以下内容：

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

Answer 2

似乎复制/粘贴整个主题是唯一的方法。您可以创建具有定义主题的特殊服务，然后在图表组件中导入特定主题。然后将其应用到构造函数中：

  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

Answer 3

主题工厂现在是highcharts/themes/<theme-name>的默认导出，因此可以使用：

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

使用highcharts-angular更改主题

3 个答案: