当y轴数据为空或0时,如何隐藏自动x轴?

时间:2017-07-05 16:24:39

标签: highcharts

我在堆积列中y轴值为0时尝试隐藏x轴值,当使用其他字段进行过滤时应该是自动的。

Code http://jsfiddle.net/o339uqLm/2/

1 个答案:

答案 0 :(得分:0)

您可以像Barabara Laird所提到的那样对数据进行预处理。

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1)
      i--
    }
  }
  return this
}


const series = [{
  name: 'John',
  data: [4, 3, null, 7, 2]
}, {
  name: 'Jane',
  data: [5, 2, null, 2, 1]
}, {
  name: 'Joe',
  data: [1, 4, null, 2, 5]
}]

for (let i = 0; i < series.length; ++i) {
    // Remove nulls for data in all series
    series[i].data.clean()
}

const options = {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Stacked column chart'
  },
  xAxis: {
    categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Total fruit consumption'
    },
    stackLabels: {
      enabled: true,
      style: {
        fontWeight: 'bold',
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
      }
    }
  },
  legend: {
    align: 'right',
    x: -30,
    verticalAlign: 'top',
    y: 25,
    floating: true,
    backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
    borderColor: '#CCC',
    borderWidth: 1,
    shadow: false
  },
  tooltip: {
    headerFormat: '<b>{point.x}</b><br/>',
    pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      dataLabels: {
        enabled: true,
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
      }
    }
  },
  series: series
}

const chart = Highcharts.chart('container', options)

实例: http://jsfiddle.net/m62dxf9h/