如何在HighCharts中設置X軸上的間隔點？

Question

我有一個氣泡圖，想將x軸上的間隔點設置為預定義列表。 例如，列表為[90、100、103、108、110、112、116、120]。 這是我的代碼：

jQuery("#center_col_wrapper").highcharts({

chart: {
  type: 'bubble'
},

title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
  text: "BUBBLE CHART"
},

categories: ['90', '100', '110']
},
yAxis: {
title: {
  text: ""
},
labels: {
  enabled: false
}
},
series: [
{
  name:"S1", data: [[100,10,87]]
}, 
{
  name:"S2", data: [[100,11,87]]
},
{
  name:"S3", data: [[110,12,87]]
},
{
  name:"S4", data: [[110,13,87]]
}
]

});

這是我的jsfiddle： http : //jsfiddle.net/mLP7U/

Answer 1

您可以指定

minTickInterval: 10,
min: 90,

在您的xAxis配置中。

參見http://api.highcharts.com/highcharts#xAxis.min

和http://api.highcharts.com/highcharts#xAxis.minTickInterval

有關這些項目的說明。 這樣只會在您的x軸上顯示90、100和110標簽

Answer 2

因此，我能夠使用標簽中的格式化程序功能來執行此操作。 我將min設置為0，max設置為5，tickInterval設置為1。定義了一個數組，格式化程序使用此數組選擇適當的標簽。

var labels = ["70", "90", "100", "110", "130", "145"];
jQuery("#container").highcharts({

chart: {
  type: 'bubble'
},

title: {
text: 'Highcharts Bubbles'
},
xAxis: {
allowDecimals: false,
title: {
  text: "Change"
},
    tickInterval: 1,
    min: 0,
    max: 5,
    labels: {
        formatter: function() {
            if (labels[this.value]) {
                return labels[this.value]
            }
            return "e"
        }
    }
},
yAxis: {
            gridLineColor: "#ffffff",

title: {
  text: ""
},
labels: {
  enabled: false
},
    tickInterval: 1,
    min: 0,
    max: 5
},
series: [
{
  name:"A", data: [[2,1,87]]
}, 
{
      name:"B", data: [[2,2,87]]
},
{
  name:"C", data: [[2,3,87]]
},
{
  name:"D", data: [[4,1,87]]
}
]

});

http://jsfiddle.net/mLP7U/6/