如何向带有链接的highcharts.js锚<a>标记中添加自定义CSS

Question

如果单击标题，我将尝试在类别名称上添加一个标记，以重新定向到另一个页面。目前，我的css类名没有应用任何样式。当检查元素时，我看到我在标签中包装的标题有一个“High图表-锚”类，我试图覆盖High图表-锚，或者添加自定义css来显示我想要的外观。我试图添加一个颜色:红色到高图表-锚，但它没有影响我的图形。

在我的第二个标题中，锚标签只应用于第一行文本，我试图在"2“中使用完整的3行文本。大多数使用Facebook广告销售的网上商店”可点击“，目前”大多数网上商店使用“是唯一链接到另一页的文本。

下面是我试图做的事情的代码片段：

      xAxis: {
        categories: ['<a class="highcharts-anchor" href="google.com"> 1. Highest Sales. </a>', '2. <a class="anchor-text" href="google.com"> Most Sold Online Stores Using Facebook Advertisements </a>'],
        labels: {
          align: 'left',
          x: -180,
        }
      },


.anchor-text {
  color: red;
  font-size: 20px;
  font-weight: bold;
}

.highcharts-anchor {
  color: red;
}

这里有一个指向我的小小提琴https://jsfiddle.net/bs1o2yth/10/的链接

Answer 1

您只需将格式化程序用于color，并将anchor标记添加到标签中即可。

格式化程序函数返回标签和其他数据的值。只需检查要用哪个pos着色，并添加相关的anchor标记即可。在您的情况下，pos将从0到4，因为您只有five标签。

我重新创建了您的示例，并将anchor标记添加到所有您可以在其上进行click并访问href链接的标签中。

运行下面的片段，以确保它的工作。

​

Highcharts.chart('container', {

  chart: {
    type: 'bar',
    marginLeft: 200
  },

  xAxis: {
    categories: ['1. Highest Sales.', '2. Sed pretium aliquet dapibus.', '3. Donec mollis sit amet elit.', '4. Donec mollis sit amet elit.', '5. Donec mollis sit amet elit.'],
    labels: {
      align: 'left',
      x: -180,
      formatter: function() {
        if (this.pos == 0) {
          return '<a href="https://google.com" style="fill: green;">' + this.value + '</a>';
        } else if (this.pos == 1) {
          return '<a href="https://google.com" style="fill: #FF00FF;">' + this.value + '</a>';
        } else if (this.pos == 2) {
          return '<a href="https://google.com" style="fill: blue;">' + this.value + '</a>';
        } else if (this.pos == 3) {
          return '<a href="https://google.com" style="fill: yellow;">' + this.value + '</a>';
        } else if (this.pos == 4) {
          return '<a href="https://google.com" style="fill: green;">' + this.value + '</a>';
        } else {
          return this.value
        }
      }
    }
  },

  plotOptions: {
    series: {
      dataLabels: {
        enabled: true,
        format: '{y} %'
      }
    }
  },

  series: [{
    data: [{
      y: 5,
      color: "#00FF00"
    }, {
      y: 10,
      color: "#FF00FF"
    }, {
      y: 7,
      color: "blue"
    }, {
      y: 3,
      color: "yellow"
    }, {
      y: 7,
      color: "blue"
    }]
  }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>

<div class='col-md-6'>
  <div id="container"></div>

</div>

​