Question

我有一个x轴，其中包含年龄类别（+45、40、30 ... 0、5、10 ... 30 +）

类别输出以刻度线为中心。到目前为止一切都很好。

但是，第一个和最后一个类别似乎“填充”了绘图区域的左右，我找不到减少或消除此间距的任何方法。

y轴刻度线应设置在最左边区域的垂直边缘上。同样，在右侧，x轴应停在“ 30+”勾号处。

<!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() {

          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>
    </body>     
</html>

Answer 1

不要忘记category类型的轴与其他所有轴一样的事实，因此，如果那里有16个类别，则轴的极值是0, 15，并且这就是为什么您只需要定义xAxis.min和xAxis.max值以使您的轴范围变窄，就像这样：

xAxis: {
  min: 0.5,
  max: 14.5
}

此外，请将xAxis.labels.style.textOverflow设置为等于'none'，以避免截断最后一个标签文本。

实时示例：https://jsfiddle.net/c1h3rkep/

API参考：

https://api.highcharts.com/highcharts/xAxis.min

https://api.highcharts.com/highcharts/xAxis.max

https://api.highcharts.com/highcharts/xAxis.labels.style

高图第一个和最后一个类别的宽度

1 个答案: