javascript 如何在 HighCharts 的 x 轴上设置间隔点？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24275107/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set interval points on the x-axis in HighCharts?
提问by dr.jekyllandme
I have a bubble chart and would like to set the interval points on the x-axis to a predefined list. For example, the list is [90, 100, 103, 108, 110, 112, 116, 120]. Here's my code:
我有一个气泡图，想将 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]]
}
]
});
Here's my jsfiddle: http://jsfiddle.net/mLP7U/
这是我的 jsfiddle：http: //jsfiddle.net/mLP7U/
回答by matt
You can specify
您可以指定
minTickInterval: 10,
min: 90,
within your xAxis configuration.
在您的 xAxis 配置中。
See http://api.highcharts.com/highcharts#xAxis.min
见http://api.highcharts.com/highcharts#xAxis.min
and http://api.highcharts.com/highcharts#xAxis.minTickInterval
和http://api.highcharts.com/highcharts#xAxis.minTickInterval
for explanations on these items. This will make only the 90, 100, and 110 labels appear on your x axis
对这些项目的解释。这将使 x 轴上仅显示 90、100 和 110 标签
回答by dr.jekyllandme
So I was able to do this using formatter function in labels. I set min to 0, max to 5, and tickInterval to 1. An array was defined and formatter used this array to choose the appropriate label.
所以我能够在标签中使用格式化程序功能来做到这一点。我将最小值设置为 0，最大值设置为 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]]
}
]
});
