Question

我正在尝试做一个像这样的图表：

你可以看到它有一个辅助Y轴和x和y方向的情节线。我已设法实现以下（见下面的代码），但我正在努力与次要y轴和垂直情节线。如何添加此辅助y轴和垂直情节线？在此先感谢您的帮助或任何指导。

//Graficas latest
Highcharts.chart('grafica1', {
  chart: {
    events: {
      load: function() {
        var label = this.renderer.label("SOURCE: CEPI")
          .css({
            width: '600px',
            fontSize: '1em',
            color: '#414042'
          })
          .attr({
            'stroke': 'silver',
            'stroke-width': 0,
            'r': 2,
            'padding': -15
          })
          .add();
        label.align(Highcharts.extend(label.getBBox(), {
          align: 'center',
          x: 30, // offset
          verticalAlign: 'bottom',
          y: 0 // offset
        }), null, 'spacingBox');
      }
    },
    marginBottom: 90
  },
  title: {
    text: 'European Recycling Rate of Paper for Recycling',
    style: {
      fontSize: '2.5em'
    }
  },
  subtitle: {
    text: 'CEPI Statistics - Status as of 2015'
  },
  xAxis: {
    categories: ['1991', '1992', '1993', '1994', '1995', '1996', '1997', '1998', '1999', '2000', '2001', '2002', '2003', '2004', '2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015']
  },
  yAxis: {
    title: {
      text: ''
    }
  },
  series: [{
    type: 'column',
    color: '#8cc640',
    name: 'Paper & Board Consumption',
    data: [64.801, 65.576, 65.863, 70.939, 70.937, 71.124, 76.629, 79.788, 82.228, 86.826, 83.878, 84.895, 86.673, 88.918, 89.903, 91.916, 93.165, 90.209, 80.996, 84.873, 83.496, 81.280, 80.161, 81.288, 82.484]
  }, {
    type: 'column',
    color: '#6cbd56',
    name: 'Recycling inside Europe',
    data: [26.641, 27.781, 28.611, 31.823, 33.359, 34.597, 36.960, 38.906, 40.544, 43.174, 43.658, 44.800, 45.730, 47.641, 49.011, 50.731, 51.504, 50.184, 46.149, 49.800, 49.108, 48.420, 49.287, 49.511, 49.583]
  }, {
    type: 'column',
    color: '#009347',
    name: 'Recycling Outside Europe',
    data: [-0.512, -1.038, -0.598, -0.662, -0.319, 0.358, 0.725, 1.109, 2.339, 1.779, 2.347, 2.436, 3.029, 4.655, 6.587, 7.306, 8.535, 9.853, 12.058, 8.371, 9.406, 9.446, 8.319, 8.561, 9.384]
  }, {
    name: 'Recycling Rate',
    color: '#2f7cba',
    data: [40.3, 40.8, 42.5, 43.9, 46.6, 49.1, 49.2, 50.2, 52.2, 51.8, 54.8, 55.6, 56.3, 58.8, 61.8, 63.1, 64.4, 66.6, 71.9, 68.5, 70.1, 71.2, 71.9, 71.4, 71.5],
    marker: {
      lineWidth: 1,
      lineColor: '#2f7cba'
    }
  }]
});

.grafica {
  width: 400px;
  height: 400px;
}

<div class="grafica" id="grafica1"></div>

Answer 1

定义一个轴数组，第二个yAxis应链接到第一个yAxis并具有相反的prop：
```
yAxis: [{
  title: {
    text: ''
  }
}, {
  opposite: true,
  linkedTo: 0
}],
```
将xAxis网格线的宽度设置为某个正值，并可选择通过将其长度设置为0来隐藏刻度：
```
xAxis: {
  categories: [],
  gridLineWidth: 1,
  tickLength: 0
},
```

绘图线与网格线类似，但更具可自定义性 - 有关详细信息，请参阅docs。

直播示例：https://jsfiddle.net/fpg0q8ep/

Highcharts - 第二个y轴和x和y方向的标绘线

1 个答案: