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/

如何在HighCharts中设置x轴上的间隔点？

2 个答案: