将Highcharts栏对齐

时间:2018-03-09 07:10:28

标签: javascript highcharts

我使用opposite属性将xAxis移到右侧。这些酒吧怎么也可能从右侧开始?

谢谢!

Highcharts.chart('absoluteInterruptions', {
  chart: {
    type: 'bar',
    rotate: -90
  },
  title: {
    text: 'Absolute Interruptions'
  },
  xAxis: {
    min: 0,
    opposite: true,
    categories: [
      'Linie5007',
      'Linie5007.ST405',
      'Linie5007.ST406',
      'Linie5007.ST407',
      'Linie5007.ST408',
      'Linie5007.ST409',
      'Linie5007.ST410',
      'Linie5007.ST411',
      'Linie5007.ST412',
      'Linie5007.ST413'
    ]
  },
  yAxis: {
    legend: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    align: 'right',
    name: 'Interruptions',
    data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
    dataLabels: {
      enabled: true,
      align: 'right',
      color: '#000000'
    }
  }]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>

1 个答案:

答案 0 :(得分:7)

从文档中找到this并设法通过设置

使其工作

yAxis:{reversed:true}

通过反转y轴,条形从右向左移动。

Highcharts.chart('absoluteInterruptions', {
  chart: {
    type: 'bar',
    rotate: -90
  },
  title: {
    text: 'Absolute Interruptions'
  },
  xAxis: {
    min: 0,
    opposite: true,
    categories: [
      'Linie5007',
      'Linie5007.ST405',
      'Linie5007.ST406',
      'Linie5007.ST407',
      'Linie5007.ST408',
      'Linie5007.ST409',
      'Linie5007.ST410',
      'Linie5007.ST411',
      'Linie5007.ST412',
      'Linie5007.ST413'
    ]
  },
  yAxis: {
    reversed: true,
    legend: {
      enabled: false
    }
  },
  legend: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  series: [{
    align: 'right',
    name: 'Interruptions',
    data: [19, 2, 2, 2, 1, 1, 1, 1, 1, 1],
    dataLabels: {
      enabled: true,
      align: 'right',
      color: '#000000'
    }
  }]
});
<script src="https://code.highcharts.com/highcharts.src.js"></script>
<div id='absoluteInterruptions'></div>