Highcharts 箱线图 y 轴

Question

我有一个来自 highcharts lib 的箱线图。这是我的组件和数据：

Highcharts.chart('container', {
    chart: {
        type: 'boxplot',
        "width": 165
    },

    title: {
        text: null
    },

    legend: {
        enabled: false
    },

    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: null
        }
    },

    yAxis: {
        title: {
            text: 'Observations'
        },
    },

    series: [{
        name: 'Observations',
        data: [
            [3, 836, 864, 882, 10312]
        ],
        tooltip: {
            headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
    }, {
        name: 'Outliers',
        color: Highcharts.getOptions().colors[0],
        type: 'scatter',
        data: [ // x, y positions where 0 is the first category
            [0, 644],
        ],
        marker: {
            fillColor: 'white',
            lineWidth: 1,
            lineColor: Highcharts.getOptions().colors[0]
        },
        tooltip: {
            pointFormat: 'Observation: {point.y}'
        }
    }]

});

这是现在的样子：

如您所见，最小值和最大值非常不同（3 和 10312），这使得我的图表几乎无法阅读。我能做什么呢？我可以跳过 yAxis 中的一些标签吗？我尝试应用止损、最大和其他东西，但没有一个起作用

Answer 1

对于这种情况，您应该使用

logarithmic

y 轴类型：

  yAxis: {
    title: {
      text: 'Observations'
    },
    type: 'logarithmic',
    endOnTick: false
  }

实例：https://jsfiddle.net/BlackLabel/qkx5whgc/

或

breaks

和

tickPositions

，例如：

  yAxis: {
    title: {
      text: 'Observations'
    },
    endOnTick: false,
    breaks: [{
      from: 5,
      to: 600,
      breakSize: 0
    }, {
      from: 700,
      to: 800,
      breakSize: 0
    }, {
      from: 900,
      to: 9900,
      breakSize: 0
    }, {
      from: 10000,
      to: 10312,
      breakSize: 0
    }],
    tickPositions: [0, 700, 900, 10000],
    max: 10312
  }

实例：https://jsfiddle.net/BlackLabel/wj05nm6b/

---

API参考：

https://api.highcharts.com/highcharts/yAxis.breaks

https://api.highcharts.com/highcharts/yAxis.type