highcharts - 在图表区域外绘制水平线

Question

我有一个柱状图，如下图所示。如何在图表区域外绘制响应水平线（和标签）？

我知道我们可以使用plotBands和series实现类似的功能，但值必须是$(function() { Highcharts.chart('sd-median-annual-earnings-chart', { credits: { enabled: false }, chart: { type: 'column', backgroundColor: null, style: { fontSize: 'inherit', overflow: 'visible', width: '100%' } }, title: { text: 'Median Annual Earnings', style: { color: '#000', fontFamily: 'inherit', fontSize: '1.2em', fontWeight: 700 } }, xAxis: { categories: [ 'A', 'B', 'C', 'D' ], labels: { overflow: 'justify', style: { color: '#000' } }, tickWidth: 0 }, yAxis: { min: 0, max: 40000, gridLineColor: '#d6d6d6', title: { text: 'Percent', style: { color: '#FFFFFF', fontFamily: 'inherit', fontSize: 'inherit' } }, labels: { overflow: 'justify', style: { color: '#000' } }, tickPositioner: function(min, max) { var each = Highcharts.each, ticks = []; for (var i = min; i <= max; i++) { if (i % 5000 === 0) ticks.push(i); } return ticks; } }, tooltip: { enabled: false }, legend: { symbolRadius: 0, itemStyle: { color: '#000' }, itemHoverStyle: { color: '#86BC25' }, itemMarginBottom: 5 }, plotOptions: { column: { pointPadding: 0, borderColor: null, dataLabels: { enabled: true, color: '#000', format: "{y}", style: { textOutline: false } }, events: { legendItemClick: function() { return false; } } }, series: { groupPadding: 0.1 } }, series: [{ name: 'A', color: '#000', data: [10000, 34000, 25000, 6000] }, { name: 'B', color: 'blue', data: [5000, 4000, 10000, 20000] }, { name: 'C', color: '#046A38', data: [6000, 15000, 5000, 1500] }, { name: 'D', color: 'green', data: [8700, 12000, 7000, 15000] }] }); });中值范围内的值，并且该行赢了也可以在图表之外绘制。

在我的情况下，我想在图表区域外绘制线条，特别是在xAxis下（参见红色线条）。

有办法吗？

＆＃13;

＆＃13;

html,
body {
  padding: 0;
  margin: 0px;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="height:450px;width:100%;"></div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

这是我的小提琴：https://jsfiddle.net/Brianing/wtoy7L15/

Answer 1

使用SVGRenderer在图表中添加行和文字

chart: {
  type: 'column',
  backgroundColor: null,
  style: {
    fontSize: 'inherit',
    overflow: 'visible',
    width: '100%'
  },
  events: {
    load: function() {
      var ren = this.renderer,
        stline = ['M', 100, 0, 'L', 340, 0];

      ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
        .css({
          fontSize: '10px',
          color: '#FF0000'
        })
        .add();
      ren.path(stline)
        .attr({
          'stroke-width': 2,
          stroke: '#FF0000'
        })
        .translate(this.chartWidth - 360, this.chartHeight - 50)
        .add();
    }
  }
},

注意最适用于固定大小的容器

＆＃13;

＆＃13;

$(function() {
  Highcharts.chart('sd-median-annual-earnings-chart', {
    credits: {
      enabled: false
    },
    chart: {
      type: 'column',
      backgroundColor: null,
      style: {
        fontSize: 'inherit',
        overflow: 'visible',
        width: '100%'
      },
      events: {
        load: function() {
          var ren = this.renderer,
            stline = ['M', 100, 0, 'L', 340, 0];

          ren.label('Label', this.chartWidth - 155, this.chartHeight - 50)
            .css({
              fontSize: '10px',
              color: '#FF0000'
            })
            .add();
          ren.path(stline)
            .attr({
              'stroke-width': 2,
              stroke: '#FF0000'
            })
            .translate(this.chartWidth - 360, this.chartHeight - 50)
            .add();
        }
      }
    },
    title: {
      text: 'Median Annual Earnings',
      style: {
        color: '#000',
        fontFamily: 'inherit',
        fontSize: '1.2em',
        fontWeight: 700
      }
    },
    xAxis: {
      categories: [
        'A',
        'B',
        'C',
        'D'
      ],
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickWidth: 0
    },
    yAxis: {
      min: 0,
      max: 40000,
      gridLineColor: '#d6d6d6',
      title: {
        text: 'Percent',
        style: {
          color: '#FFFFFF',
          fontFamily: 'inherit',
          fontSize: 'inherit'
        }
      },
      labels: {
        overflow: 'justify',
        style: {
          color: '#000'
        }
      },
      tickPositioner: function(min, max) {
        var each = Highcharts.each,
          ticks = [];

        for (var i = min; i <= max; i++) {
          if (i % 5000 === 0)
            ticks.push(i);
        }

        return ticks;
      }
    },
    tooltip: {
      enabled: false
    },
    legend: {
      symbolRadius: 0,
      itemStyle: {
        color: '#000'
      },
      itemHoverStyle: {
        color: '#86BC25'
      },
      itemMarginBottom: 5
    },
    plotOptions: {
      column: {
        pointPadding: 0,
        borderColor: null,
        dataLabels: {
          enabled: true,
          color: '#000',
          format: "{y}",
          style: {
            textOutline: false
          }
        },
        events: {
          legendItemClick: function() {
            return false;
          }
        }
      },
      series: {
        groupPadding: 0.1
      }
    },
    series: [{
      name: 'A',
      color: '#000',
      data: [10000, 34000, 25000, 6000]
    }, {
      name: 'B',
      color: 'blue',
      data: [5000, 4000, 10000, 20000]
    }, {
      name: 'C',
      color: '#046A38',
      data: [6000, 15000, 5000, 1500]
    }, {
      name: 'D',
      color: 'green',
      data: [8700, 12000, 7000, 15000]
    }]
  });
});

＆＃13;

html,
body {
  padding: 0;
  margin: 0px;
  font-family: Helvetica, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sd-median-annual-earnings-chart" style="width: 600px; height: 250px; margin: 0 auto"></div>

＆＃13;

＆＃13;

＆＃13;