Javascript Chartist.js-增加Y轴缩放点之间的间距

Javascript Chartist.js-增加Y轴缩放点之间的间距,javascript,jquery,svg,Javascript,Jquery,Svg,我正在做一个个人项目,创建图表来显示上一个FM的API中关于我的音乐收听习惯的数据 我通过AJAX请求获取JSON数据,然后使用返回的JSON对象填充使用ChartList.js库创建的图形 我有一个很简单的问题,那就是我无法计算出如何增加图表的整体尺寸。更具体地说,我想增加Y轴上每个缩放点之间的间距,以便您可以更准确地看到每个图形 我创建了以下JS Fiddle来显示我的问题: 根据文档,我认为我需要更改一个名为scaleMinSpace的选项属性,但更改此图后,似乎没有发生任何更改 任何帮

我正在做一个个人项目,创建图表来显示上一个FM的API中关于我的音乐收听习惯的数据

我通过AJAX请求获取JSON数据,然后使用返回的JSON对象填充使用ChartList.js库创建的图形

我有一个很简单的问题,那就是我无法计算出如何增加图表的整体尺寸。更具体地说,我想增加Y轴上每个缩放点之间的间距,以便您可以更准确地看到每个图形

我创建了以下JS Fiddle来显示我的问题:

根据文档,我认为我需要更改一个名为scaleMinSpace的选项属性,但更改此图后,似乎没有发生任何更改

任何帮助都会很棒

var lastfm={};
lastfm.tracker=(函数(){
//为DOM元素和数据源设置对象
变量配置={
getRecentTracksURL:“http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
getMostPopularArtistsURL:“http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json",
用户:“jimmersjukebox”,
最近曲目选择:$(“.recenttracks”),
当前播放活动类别:$(“.current”)
};
var setupLastFM=函数(){
createpopularatistschart();
};
var createPopularTistChart=函数(){
$.getJSON(config.getmostpopularatistsurl,函数(数据){
var artistData=data.topartists.artist,
艺术家=$.map(艺术家数据,函数(艺术家){
返回[[artist.name]];
}),
playcounts=$.map(artistData,函数(playcount){
返回[[playcount.playcount]];
});
//这些是折线图的默认选项
变量选项={
//X轴的选项
axisX:{
//标签到图表区域的偏移量
抵销:10,
//是否应显示标签
showLabel:true,
//是否应绘制轴栅格
没错,
//插值函数,允许从轴标签截取值
labelInterpolationFnc:函数(值){返回值;}
},
//Y轴的选项
axisY:{
刻度间距:100
},
//将图表的固定宽度指定为字符串(即“100px”或“50%”)
宽度:未定义,
//将图表的固定高度指定为字符串(即“100px”或“50%”)
高度:未定义,
//该不该画线,
秀行:没错,
//是否应该画点
展示点:没错,
//指定是否应平滑线(将使用Catmull Rom样条线)
是的,
//覆盖图表的自然低点允许您放大或限制图表的最低显示值
低:未定义,
//覆盖图表的自然高允许您放大或限制图表的最高显示值
高:未定义,
//将图表绘图区域填充到容器元素和标签
2007年:15,
//指定组中条形的距离(以像素为单位)
序列距离:15,
//重写用于生成图表SVG结构的类名
};
数据={
//可以包含任何类型值的标签数组
标签:艺术家。切片(0,10),
//我们的系列数组包含系列对象,本例中为系列数据数组
系列:[
播放计数。切片(0,10)
]
};
//创建一个新的折线图对象,作为第一个参数传入选择器
//这就是解析到我们的图表容器元素
//是实际的数据对象。
图表列表栏('.ct图表',数据,选项);
});
};
返回{
config:config,
init:function(){
setupLastFM();
}
};
})();
$(window.load)(lastfm.tracker.init)
/*Chartist.js 0.2.4
*版权所有©2014 Gion Kunz
*根据WTFPL许可证免费使用。
* http://www.wtfpl.net/
*/
.ct图表.ct标签{填充:rgba(0,0,0,4);字体大小:.75rem}.ct图表.ct网格{笔划:rgba(0,0,0,2);笔划宽度:1px;笔划数组:2px}.ct图表.ct点{笔划宽度:10px;笔划线帽:圆形}.ct图表.ct线条{填充:无;笔划宽度:4px}.ct图表.ct区域{笔划:无;填充不透明度:.1}.ct图表.ct条形图{填充:无;笔划宽度:10px}.ct图表.ct切片.ct甜甜圈{填充:无;笔划宽度:60px}.ct图表.ct-series.ct-series-a.ct条,.ct图表.ct-series.ct-series-a.ct线,.ct图表.ct-series.ct-series-a.ct点,.ct图表.ct-series.ct-series.ct-series-a.ct切片.ct甜甜圈{笔划:#d70206}.ct图表{fill:#d70206}.ct chart.ct-series.ct-series-b.ct bar.ct chart.ct-series.ct-series-b.ct line.ct-chart.ct-series.ct-series-b.ct point.ct-chart.ct-series.ct-series.ct-b.ct-slice.ct油炸圈{stroke:#F05B4F}.ct-series.ct-series.ct-b.ct-areat.ct-series.ct-b.ct切片:not(.ct甜甜圈){fill:#.ct图.ct-series.ct-series-c.ct条,.ct图.ct-series.ct-series-c.ct线,.ct图.ct-series.ct-series-c.ct点,.ct图.ct-series.ct-series.ct-c.ct切片.ct甜甜圈{笔划:#F4C63D}.ct图.ct-series.ct-series-c.ct面积,.ct图.ct-series.ct-series.ct-series.ct-c.ct切片:非.ct图.ct-series.ct-series-d.ct条,.ct图.ct-series.ct-series-d.ct线,.ct图.ct-series.ct-series-d.ct点,.ct图.ct-series.ct-series.ct-d.ct切片.ct甜甜圈{行程:#453D3F}.ct图.ct-series.ct-d.ct面积,.ct图.ct-series.ct-series.ct-d.ct切片:非(.ct甜甜圈){填充:#453DF{显示:块;位置:相对;宽度:100%}。ct图表。ct方块:在{显示:块;浮动:左;内容:'';宽度:0;高度:0;填充底部:100%}。ct图表。ct方块:在{内容:''之后;显示:表格
var options = {
                    seriesBarDistance: 10,
                    fullWidth: true,
                    showArea:true,
                    height:'500px'

            };
new Chartist.Bar('.ct-chart', dataArray, options, responsiveOptions );