javascript - 如何将自定义 CSS 添加到带有链接的 highcharts.js 锚标签

Question

如果单击标题，我正在尝试在我的类别名称上添加标签以重定向到不同的页面。目前我的 css 类名没有应用任何样式。在检查元素时，我看到我在标签中包裹的标题有一个“highcharts-anchor”类，我试图覆盖 highcharts-anchor，或者向它添加自定义 css 以显示我想要的外观。我试图向 highcharts-anchor 添加一种颜色：红色，但它对我的图表没有影响。

同样在我的第二个标题中，锚标记仅应用于第一行文本，我正在尝试让“2. 使用 Facebook 广告的最畅销在线商店”中的整个 3 行文本可点击，目前“大多数销售的在线商店使用“是链接到另一个页面的唯一文本。

这是我正在尝试做的代码片段：

      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;
}

这是我的 jsfiddle https://jsfiddle.net/bs1o2yth/10/的链接

标签： javascriptcsshighcharts

Answer 1

您可以简单地使用格式化程序并将color标签添加anchor到您的标签。

formatter函数返回标签和其他数据的值。只需检查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>