Question

我正在尝试选择特定元素以更改“笔画”属性（以更改颜色）。

奇怪的是，我可以按班级选择一些元素，但是我真正需要更改的元素似乎不是可选的，我也不知道为什么。

在代码中，有3个选择，当前仅输出找到的元素数量并将该数量写入

标记。

“ g.highcharts-button rect”工作并将适当的值写入标记。

但是，我真正需要选择的类“ highcharts-label-box”似乎无法选择。

如果任何人都可以告诉我如何选择该元素，那么我需要能够将'stroke'属性更改为'＃ff0000'值。

我已经花了几天时间，但我看不出如何做到这一点，或者为什么它不起作用。救命！

jsfiddle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
        <title>Total Asset Allocation</title>         
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>         
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/series-label.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>
        <script src="https://code.highcharts.com/modules/export-data.js"></script>
        <script>
$(function() {
  $('#container').highcharts({
    "chart": {
        renderTo: 'container',
    type: 'area',
    marginBottom: 150,
    events: {
      load: function() {
/*
    THE NEXT FEW LINES OF CODE (CURRENTLY COMMENTED OUT) ARE MY ATTEMPT
    TO SELECT SPECIFIC CLASSES. AT THE MOMENT, I'M ONLY TRYING TO COUNT
    THE FOUND CLASSES AND OUTPUT THEM TO A <p> TAG FOR DEBUGGING.

          var g = document.querySelectorAll("g.highcharts-button rect");
            document.getElementById("gs").innerHTML = 'gs=' + g.length;

          var w = document.querySelectorAll("path.highcharts-label-box");
          document.getElementById("ws").innerHTML = 'ws=' + w.length;

          var p = document.querySelectorAll('svg g path.highcharts-label-box');
            document.getElementById("ps").innerHTML = 'ps=' + p.length;
*/

          var locator = document.querySelector('.highcharts-exporting-group');
            $(locator).append($('.highcharts-plot-lines-0').detach());

          this.renderer.rect(this.plotLeft, this.plotSizeY + this.plotTop + 100, this.plotSizeX, 2)
          .css({
            fill: '#000',
            zIndex: 4
          }).add();

        this.renderer.rect(this.plotSizeX / 16 * 9.5 + this.plotLeft, this.plotSizeY + this.plotTop + 100 - 5, 2, 12)
          .css({
            fill: '#000',
            zIndex: 4
          }).add();

        this.renderer.text('Years to Retirement', 250, 480)
          .css({
            fontSize: 15
          }).add();

        this.renderer.text('Years Past Retirement', 550, 480)
          .css({
            fontSize: 15
          }).add();

        this.renderer.text("\u25b6", this.chartWidth - 21, 467)
          .css({
            fontSize: 15
          }).add();

        this.renderer.text('\u2B07', 650, 400)
          .css({
            fontSize: 10
          }).add();

        this.renderer.text('MM RetireSMART<br/><span style="color:transparent">...</span>"In Retirement', 615, 414)
          .css({
            fontSize: 10
          }).add();
      }
    }
  },
  title: {
    text: 'Target Asset Allocation'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    categories: ['45+', 40, 35, 30, 25, 20, 15, 10, 5, 0, 5, 10, 15, 20, 25, '30+'],
    tickColor: '#000',
    tickWidth: 1,
        tickmarkPlacement: 'on',
    title: {
      enabled: false
    },

    plotLines: [{
      color: '#fff',
      width: 5,
      visible: true,
      value: 9
    }]
  },
  yAxis: {
    title: {
      text: 'Weighting',
      style: {
        color: '#000',
        fontWeight: 'bold'
      }
    },
    label: {
      padding: 50
    },
    tickmarkPlacement: 'on',
    tickInterval: 10,
    tickLength: 5,
    tickWidth: 1,
    tickColor: '#000',
    "allowDecimals": false,
    gridLineWidth: 0
  },
  plotOptions: {
    area: {
      stacking: 'percent',
      lineColor: '#fff',
      lineWidth: 1,
      marker: {
        lineWidth: 1,
        lineColor: '#fff'
      }
    },
    series: {
      events: {
        afterAnimate: function() {
          var label = this.labelBySeries;
          label.attr({
            'text-anchor': 'middle',
          }).css({
            color: this.options.labelColor
          })
        }
      },
      marker: {
        enabled: false
      },
    }
  },
  series: [{
    useHTML: true,
    name: '<span style="color: transparent;">WWWWWWW</span>Other Funds</span>',
    color: '#b0b0b0',
    label: {
      connectorAllowed: true,
      onArea: false,
      style: {
        color: '#fff',
        fontSize: 'large'
      }
    },
    data: [2, 3, 3, 4.5, 3, 3, 3, 2, 5, 3.5, 4, 4, 3, 3, 2, 4]
  }, {
    name: '<span style="color: transparent;">WWW</span>Fixed Income<br><span style="color:transparent;font-size:3px;">W</span><br/><span style="color: transparent;">WWW</span>Funds',
    color: '#010101',
    label: {
      style: {
        fontSize: 'large'
      }
    },
    data: [5, 6, 6, 7, 9, 11, 14, 16, 16, 18, 19, 30, 35, 44, 55, 66]
  }, {
    name: '<span class="EquityFunds">Equity Funds</span><span style="color: transparent;">WW</span>',
    color: '#303030',
    label: {
      style: {
        fontSize: 'large'
      }
    },
    data: [95, 99, 98, 97.5, 90, 80, 70, 60, 40, 33, 22, 20, 17, 15, 13, 11]
  }],

});

});
    </script>         
    </head>     
    <body> 
        <div id="container" style="width: 800px; height: 510px; margin: 0 auto"></div>
        <p id="gs"></p>
        <p id="ws"></p>
        <p id="ps"></p>
    </body>     
</html>

Answer 1

您可以简单地在series.afterAnimate事件中更改笔画属性：

label.box.attr({
            stroke: 'red'
          })

唯一的问题是找到一个包含连接器属性的对象（盒子）。

jsFiddle：https://jsfiddle.net/BlackLabel/45hfga0y/

此外，您也可以使用自己的方法进行操作。我们可以使用选择器path.highcharts-label-box获得一个元素并设置属性，如下所示：

var w = document.querySelectorAll("path.highcharts-label-box");
               w[0].setAttribute('stroke', 'red');

但是动画完成后，我们必须获取w元素-否则，如果我们在chart.load事件中执行此操作，则w元素将不存在。

jsFiddle：https://jsfiddle.net/BlackLabel/5q7feort/

希望有帮助！

最诚挚的问候

ps。就像daniel_s之前告诉您的那样，请不要在一些支持渠道上重复您的问题。无论如何，您都会得到答案。

高图无法选择某些类别

1 个答案: