highcharts中x轴的刻度的距离如何设置highcharts 中
x轴的刻度的距离如何设置，是否存在该属性，查找资料很久了，也没有解决。着急等待中
回答1：楼主看看
回答2：xAxis:{&
}& }& 你可通过设置labels里面的step属性X轴显示的间隔。
回答3：探讨不对
我要的是 刻度的距离
不是 ”显示的方式各几个显示信息“
你们有QQ没 跟你们弄个图
我不会在希赛上加图1672人阅读
从使用highcharts图表开始到如今也见证了很多使用者一直困惑着这样一个问题：如何才能够设置第一个数据点从坐标原点开始？要在什么条件下才能够从原点开始画？
针对这样一个问题，我一直没有过多地去深入了解，今天也正式有一个朋友遇到这样一个问题。所以，决定将自己的使用心得总结如下。
1、尚未设置xAxis的categories
在我们尚未设置任何categories数据的情况下，让图表自动给x轴分配刻度，你会发现我们不设置任何xAxis的其他属性，第一个数据点在x轴上的位置就是在原点位置。
2、当我们人为设置了xAxis的categories
一旦设置了categories数据过后，不管你设置了xAxis的min、minRange、minPadding 均为0也无济于事，第一个数据点与Y轴的距离还是有一些。
变相思考：
1、不设置categories，其实就是自动给x轴刻度分配了0、1、2、3、n的刻度值和刻度角标一样的。
2、我们想要的无非是想将我们自己的刻度显示在x轴上和tooltip内。
3、那么我们何不巧用xAxis的labels的formatter格式化方法来做这个刻度的真正变换呢？
实际操作：
1、如何让y轴方向上从原点开始？
想要让数据点从原点开始，需要做的就是要控制数据点的x轴方向和y轴方向。关于y轴方向的控制，我们只需要配置两个属性即可：
1）、startOnTick:用于设置是否显示开始刻度，默认为true，我们需要设置此属性值为false。
2）、minPadding：用于设置最小值与X轴的距离值，默认为非0，我们需要设置此属性值为0。
示例配置代码：
yAxis: { minPadding:0, startOnTick:false },
2、如何让X轴方向上从原点开始？
根据前面”变相思考“小结，我们需要这样做：
1）、将categories定义成为一个一维数组。
var categories =
['一月', '二月', '三月', '四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
2）、巧用labels的formatter格式化方法根据当前刻度值角标去categories数组内对应获取想要体现的刻度值。
formatter: function() {
return categories[this.value];
3）、为了让刻度不出现间断效果，我们在设置一下刻度间隔属性tickInterval为1
formatter: function() {
return categories[this.value];
tickInterval:1
这样一来，我们就可以完美体现不管xAxis的categories是什么数据均可将其第一个数据点设置为从原点开始。
晒上一张效果图：
完整示例代码如下所示：
$(function () {
var categories =
['一月', '二月', '三月',
'四月', '五月', '六月','七月', '八月', '九月', '十月', '十一月', '十二月'];
$('#container').highcharts({
formatter: function() {
return categories[this.value];
tickInterval:1
minPadding:0,
startOnTick:false
color:&red&
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]
在线Demo查看下载：http://jsfiddle.net/stepday/yVG7R/
【另一种可行的方式】：
tickInterval:1
lineWidth:1,
minPadding:0,
plotLines: [{
color: '#808080'
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：51019次
积分：1262
积分：1262
排名：千里之外
原创：43篇
转载：147篇
(22)(26)(7)(7)(9)(3)(7)(13)(9)(34)(8)(21)(22)(3)扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
下载作业帮安装包
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
Highcharts去掉或者隐藏掉y轴的刻度线
扫二维码下载作业帮
拍照搜题，秒出答案，一键查看所有搜题记录
在js中加入如下配置：yAxis&:&{&&&&gridLineWidth:&0}
为您推荐：
其他类似问题
扫描下载二维码本帖子已过去太久远了，不再提供回复功能。最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题，其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来。这种方法不过始终没有像histock图表那么美观和便于操作。今天我们就来谈谈如何在highcharts图表内巧用histock.js让图表产生滚动条。 1、做出一个highcharts图 &script src="/stock/highcharts.js"&&/script& &div id="container" &&/div& $(function () { $('#containe...
最近highcharts图表讨论群里面很多朋友都在问如何让highcharts图表在X轴数据多的情况下产生滚动条的问题，其实之前有一个解决办法是将装载图表的div容器用css样式表弄一个滚动条出来。这种方法不过始终没有像histock图表那么美观和便于操作。今天我们就来谈谈如何在highcharts图表内巧用histock.js让图表产生滚动条。
1、做出一个highcharts图
1.&script src=""&&/script&
3.&div id="container"&style="height: 400width:400"&&/div&
01.$(function&() {
02.$('#container').highcharts({
03.chart: {
05.xAxis: {
06.tickLength: 30,
07.categories: ['Jan',&'Feb',&'Mar',&'Apr',&'May',&'Jun',&'Jul',&'Aug',&'Sep',&'Oct',&'Nov','Dec','Jan',&'Feb',&'Mar',&'Apr',&'May',&'Jun',&'Jul',&'Aug',&'Sep',&'Oct',&'Nov',&'Dec'],
11.series: [{
12.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,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]&&&&&&&
特别提醒：
想要滚动条变得很友好，最好设置一下xAxis的min属性，这个时候的min和max是可以用于控制滚动条长短的。
2、这个时候的图是没有滚动条，且坐标刻度比较拥挤，很不美观。
3、我们将引用的highcharts.js地址修改为histock.js的地址
4、追加scrollbar属性
1.scrollbar:{
2.enabled:true&
5、最后效果图如下所示：
阅读(...) 评论()}