highcharts highchart自定义类css未应用于哑铃系列的工具提示

tcomlyy6  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(177)

我正在做哑铃系列的 highcharts
我正在使用自定义类的图表,这是工作正常。
但它不适用于highchart工具提示和legand。我用了相同的类为其他图表,它的工作很好。它是不工作的哑铃系列

我找了很多,以找到这个问题,但我不能找到任何解决方案。
在这里你可以找到我的代码

{
  chart: {
    type: 'dumbbell',
    inverted: true,
    className: Classes.HIGHCHARTS_THEME,
  },

  legend: {
    enabled: false,
  },

  subtitle: {
    text: '1960 vs 2018',
  },

  title: {
    text: 'Change in Life Expectancy',
  },

  tooltip: {
    shared: true,
  },

  xAxis: {
    type: 'category',
  },

  yAxis: {
    title: {
      text: 'Life Expectancy (years)',
    },
  },

  series: [
    {
      type: 'dumbbell',
      name: 'Life expectancy change',
      data: [
        {
          name: 'Austria',
          low: 69,
          high: 82,
        },
        {
          name: 'Belgium',
          low: 70,
          high: 81,
        },
        {
          name: 'Bulgaria',
          low: 69,
          high: 75,
        },
        {
          name: 'Croatia',
          low: 65,
          high: 78,
        },
        {
          name: 'Cyprus',
          low: 70,
          high: 81,
        },
        {
          name: 'Czech Republic',
          low: 70,
          high: 79,
        },
        {
          name: 'Denmark',
          low: 72,
          high: 81,
        },
        {
          name: 'Estonia',
          low: 68,
          high: 78,
        },
        {
          name: 'Finland',
          low: 69,
          high: 81,
        },
        {
          name: 'France',
          low: 70,
          high: 83,
        },
        {
          name: 'Greece',
          low: 68,
          high: 81,
        },
        {
          name: 'Spain',
          low: 69,
          high: 83,
        },
        {
          name: 'Netherlands',
          low: 73,
          high: 82,
        },
        {
          name: 'Ireland',
          low: 70,
          high: 82,
        },
        {
          name: 'Lithuania',
          low: 70,
          high: 75,
        },
        {
          name: 'Luxembourg',
          low: 68,
          high: 83,
        },
        {
          name: 'Latvia',
          low: 70,
          high: 75,
        },
        {
          name: 'Malta',
          low: 69,
          high: 82,
        },
        {
          name: 'Germany',
          low: 69,
          high: 81,
        },
        {
          name: 'Poland',
          low: 68,
          high: 78,
        },
        {
          name: 'Portugal',
          low: 63,
          high: 81,
        },
        {
          name: 'Romania',
          low: 66,
          high: 75,
        },
        {
          name: 'Slovakia',
          low: 70,
          high: 77,
        },
        {
          name: 'Slovenia',
          low: 69,
          high: 81,
        },
        {
          name: 'Sweden',
          low: 73,
          high: 82,
        },
        {
          name: 'Hungary',
          low: 68,
          high: 76,
        },
        {
          name: 'Italy',
          low: 69,
          high: 83,
        },
        {
          name: 'UK',
          low: 71,
          high: 81,
        },
      ],
    },
  ],
  credits: {
    enabled: false,
  },
}

谁能告诉我如何解决这个问题

aydmsdu9

aydmsdu91#

首先,您需要将自定义的className添加到tooltip选项中。

tooltip: {
    className: 'myClass'
  },

然后为一组工具提示设置.myClass。为一个工具提示创建.myClass-box类,它具有更高的优先级,并且您应该在其中应用CSS规则。

.myClass, .myClass-box {
  fill: red;
}

演示:https://jsfiddle.net/BlackLabel/8hj3rtqk/

相关问题