javascript Highcharts x 轴刻度以偏移量开始
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/26364906/
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
Highcharts x-axis tick starts with an offset
提问by Ashish Singh
I am trying to remove the offset
on the tick of the x-axis
.
我试图删除offset
上的刻度x-axis
。
I want the first tick 10/8
to start from the x-axis
and y-axis
intersection.
我希望第一个刻度10/8
从x-axis
和y-axis
交叉点开始。
10-8
should be on the marker which is between the two labels.
10-8
应该在两个标签之间的标记上。
I have following code for it in highchart.
我在 highchart 中有以下代码。
xAxis: {
categories: categories,
title: {
text: title_x_axis,
style: {
fontWeight: 'bold'
},
formatter: function(){
return "<h3><b>" + this.value + "</b></h3>";
}
},
min: 0,
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
align: "left"
},
Max padding and min padding are set to 0, So I don't know what the problem is?
Max padding和min padding都设置为0,所以不知道是什么问题?
EDIT:
编辑:
I have created a fiddleof the type of chart I am dealing with.
Note Image below has different x-axis values as I am not using the same value of fiddle.
Also I have set tickmarkPlacement: "on"
after I took that snapshot.
I want Jan
label to start from the beginning of line. It has some offset currently.
我创建了一个我正在处理的图表类型的小提琴。注意下面的图像具有不同的 x 轴值,因为我没有使用相同的小提琴值。tickmarkPlacement: "on"
我拍完那个快照后也设置了。我希望Jan
标签从行首开始。它目前有一些偏移。
Can anyone help me with this?
谁能帮我这个?
回答by Kacper Madej
You could use (assuming 'categories' is your array of categories)
您可以使用(假设“类别”是您的类别数组)
min: 0.5,
max: categories.length-1.5,
startOnTick: false,
endOnTick: false,
Example: http://jsfiddle.net/27hg0v06/1/
示例:http: //jsfiddle.net/27hg0v06/1/
Use newset version of highcharts to get fully working tooltip:
使用 newset 版本的 highcharts 来获得完全可用的工具提示:
<script src="http://github.highcharts.com/highcharts.js"></script>
回答by jlbriggs
Take a look at the tickMarkPlacement property:
看一下 tickMarkPlacement 属性:
By default, it is 'between', which is what you are seeing on your chart.
默认情况下,它是“介于”,这就是您在图表上看到的内容。
Setting it to 'on' should do what you need.
将其设置为“on”应该可以满足您的需求。
You can look at the minPadding and maxPadding properties in addition to the tickMarkPlacement:
除了 tickMarkPlacement 之外,您还可以查看 minPadding 和 maxPadding 属性:
回答by Saumyajit
Updated Fiddle:
更新的小提琴:
$(function () {
$('#container').highcharts({
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
tickInterval: 1,
tickmarkPlacement: "on",
startOnTick: true,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
offset: 0
},
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 400px"></div>
You Just Need to Add the following before series object:
您只需要在系列对象之前添加以下内容:
plotOptions: {
series: {
findNearestPointBy: 'x',
label: {
connectorAllowed: false
},
pointPlacement: 'on'
}
},