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

Question

我正在做一个个人项目，通过Last FM的API创建图表来显示我的音乐收听习惯的数据。

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

我有一个我认为非常简单的问题，因为我不能解决如何增加图表的整体大小？更具体地说，我想增加Y轴上每个刻度点之间的间距，以便您可以更准确地看到每个图形。

我已经创建了下面的JS飞德尔来显示我的问题：

http://jsfiddle.net/jt96usn9/

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

能帮上忙就太好了？！

​

var lastfm = {};

lastfm.tracker = (function(){

	//Set up an object for DOM elements and data source
	var config = {
		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",
		user: "jimmersjukebox",
		recentTracksElement: $(".recent-tracks"),
		currentlyPlayingActiveClass: $(".current")
	};


	var setupLastFM = function(){
		createPopularArtistsChart();
	};



	var createPopularArtistsChart = function(){


		$.getJSON(config.getMostPopularArtistsURL,function(data){
			var artistData = data.topartists.artist,
			artists = $.map(artistData, function(artist) {
				return [[artist.name]];
			}),

			playcounts = $.map(artistData, function(playcount) {
				return [[playcount.playcount]];
			});


			// These are the default options of the line chart
			var options = {
			  // Options for X-Axis
			  axisX: {
			    // The offset of the labels to the chart area
			    offset: 10,
			    // If labels should be shown or not
			    showLabel: true,
			    // If the axis grid should be drawn or not
			    showGrid: true,
			    // Interpolation function that allows you to intercept the value from the axis label
			    labelInterpolationFnc: function(value){return value;}
			  },
			  // Options for Y-Axis
			  axisY: {
			    scaleMinSpace: 100
			  },
			  // Specify a fixed width for the chart as a string (i.e. '100px' or '50%')
			  width: undefined,
			  // Specify a fixed height for the chart as a string (i.e. '100px' or '50%')
			  height: undefined,
			  // If the line should be drawn or not
			  showLine: true,
			  // If dots should be drawn or not
			  showPoint: true,
			  // Specify if the lines should be smoothed (Catmull-Rom-Splines will be used)
			  lineSmooth: true,
			  // Overriding the natural low of the chart allows you to zoom in or limit the charts lowest displayed value
			  low: undefined,
			  // Overriding the natural high of the chart allows you to zoom in or limit the charts highest displayed value
			  high: undefined,
			  // Padding of the chart drawing area to the container element and labels
			  chartPadding: 15,
			  // Specify the distance in pixel of bars in a group
			  seriesBarDistance: 15,
			  // Override the class names that get used to generate the SVG structure of the chart

			};

			data = {
			  // A labels array that can contain any sort of values
			  labels: artists.slice(0,10),
			  // Our series array that contains series objects or in this case series data arrays
			  series: [
			  	playcounts.slice(0,10)
			  ]
			};

			// Create a new line chart object where as first parameter we pass in a selector
			// that is resolving to our chart container element. The Second parameter
			// is the actual data object.
			Chartist.Bar('.ct-chart', data, options);

		});



	};

	return{
		config: config,
		init: function(){
			setupLastFM();
		}
	};
})();
$(window).load(lastfm.tracker.init);

/* Chartist.js 0.2.4
 * Copyright © 2014 Gion Kunz
 * Free to use under the WTFPL license.
 * http://www.wtfpl.net/
 */

/*
* 提示：该行代码过长，系统自动注释不进行高亮。一键复制会移除系统注释 
* .ct-chart .ct-label{fill:rgba(0,0,0,.4);font-size:.75rem}.ct-chart .ct-grid{stroke:rgba(0,0,0,.2);stroke-width:1px;stroke-dasharray:2px}.ct-chart .ct-point{stroke-width:10px;stroke-linecap:round}.ct-chart .ct-line{fill:none;stroke-width:4px}.ct-chart .ct-area{stroke:none;fill-opacity:.1}.ct-chart .ct-bar{fill:none;stroke-width:10px}.ct-chart .ct-slice.ct-donut{fill:none;stroke-width:60px}.ct-chart .ct-series.ct-series-a .ct-bar,.ct-chart .ct-series.ct-series-a .ct-line,.ct-chart .ct-series.ct-series-a .ct-point,.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut{stroke:#d70206}.ct-chart .ct-series.ct-series-a .ct-area,.ct-chart .ct-series.ct-series-a .ct-slice:not(.ct-donut){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-b .ct-slice.ct-donut{stroke:#F05B4F}.ct-chart .ct-series.ct-series-b .ct-area,.ct-chart .ct-series.ct-series-b .ct-slice:not(.ct-donut){fill:#F05B4F}.ct-chart .ct-series.ct-series-c .ct-bar,.ct-chart .ct-series.ct-series-c .ct-line,.ct-chart .ct-series.ct-series-c .ct-point,.ct-chart .ct-series.ct-series-c .ct-slice.ct-donut{stroke:#F4C63D}.ct-chart .ct-series.ct-series-c .ct-area,.ct-chart .ct-series.ct-series-c .ct-slice:not(.ct-donut){fill:#F4C63D}.ct-chart .ct-series.ct-series-d .ct-bar,.ct-chart .ct-series.ct-series-d .ct-line,.ct-chart .ct-series.ct-series-d .ct-point,.ct-chart .ct-series.ct-series-d .ct-slice.ct-donut{stroke:#453D3F}.ct-chart .ct-series.ct-series-d .ct-area,.ct-chart .ct-series.ct-series-d .ct-slice:not(.ct-donut){fill:#453D3F}.ct-chart.ct-square{display:block;position:relative;width:100%}.ct-chart.ct-square:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:100%}.ct-chart.ct-square:after{content:"";display:table;clear:both}.ct-chart.ct-square>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-second{display:block;position:relative;width:100%}.ct-chart.ct-minor-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:93.75%}.ct-chart.ct-minor-second:after{content:"";display:table;clear:both}.ct-chart.ct-minor-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-second{display:block;position:relative;width:100%}.ct-chart.ct-major-second:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:88.8888888889%}.ct-chart.ct-major-second:after{content:"";display:table;clear:both}.ct-chart.ct-major-second>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-third{display:block;position:relative;width:100%}.ct-chart.ct-minor-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:83.3333333333%}.ct-chart.ct-minor-third:after{content:"";display:table;clear:both}.ct-chart.ct-minor-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-third{display:block;position:relative;width:100%}.ct-chart.ct-major-third:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:80%}.ct-chart.ct-major-third:after{content:"";display:table;clear:both}.ct-chart.ct-major-third>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fourth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fourth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:75%}.ct-chart.ct-perfect-fourth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fourth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-perfect-fifth{display:block;position:relative;width:100%}.ct-chart.ct-perfect-fifth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:66.6666666667%}.ct-chart.ct-perfect-fifth:after{content:"";display:table;clear:both}.ct-chart.ct-perfect-fifth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-sixth{display:block;position:relative;width:100%}.ct-chart.ct-minor-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:62.5%}.ct-chart.ct-minor-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-minor-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-golden-section{display:block;position:relative;width:100%}.ct-chart.ct-golden-section:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:61.804697157%}.ct-chart.ct-golden-section:after{content:"";display:table;clear:both}.ct-chart.ct-golden-section>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-sixth{display:block;position:relative;width:100%}.ct-chart.ct-major-sixth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:60%}.ct-chart.ct-major-sixth:after{content:"";display:table;clear:both}.ct-chart.ct-major-sixth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-minor-seventh{display:block;position:relative;width:100%}.ct-chart.ct-minor-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:56.25%}.ct-chart.ct-minor-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-minor-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-seventh{display:block;position:relative;width:100%}.ct-chart.ct-major-seventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:53.3333333333%}.ct-chart.ct-major-seventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-seventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-octave{display:block;position:relative;width:100%}.ct-chart.ct-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:50%}.ct-chart.ct-octave:after{content:"";display:table;clear:both}.ct-chart.ct-octave>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-tenth{display:block;position:relative;width:100%}.ct-chart.ct-major-tenth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:40%}.ct-chart.ct-major-tenth:after{content:"";display:table;clear:both}.ct-chart.ct-major-tenth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-eleventh{display:block;position:relative;width:100%}.ct-chart.ct-major-eleventh:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:37.5%}.ct-chart.ct-major-eleventh:after{content:"";display:table;clear:both}.ct-chart.ct-major-eleventh>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-major-twelfth{display:block;position:relative;width:100%}.ct-chart.ct-major-twelfth:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:33.3333333333%}.ct-chart.ct-major-twelfth:after{content:"";display:table;clear:both}.ct-chart.ct-major-twelfth>svg{display:block;position:absolute;top:0;left:0}.ct-chart.ct-double-octave{display:block;position:relative;width:100%}.ct-chart.ct-double-octave:before{display:block;float:left;content:"";width:0;height:0;padding-bottom:25%}.ct-chart.ct-double-octave:after{content:"";display:table;clear:both}.ct-chart.ct-double-octave>svg{display:block;position:absolute;top:0;left:0}
*/

<script src="//cdnjs.cloudflare.com/ajax/libs/chartist/0.2.4/chartist.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="chart-container">
                <div class="ct-chart"></div>
            </div>

​

Answer 1

如果在选项中给出高度，比如

var options = {
                    seriesBarDistance: 10,
                    fullWidth: true,
                    showArea:true,
                    height:'500px'

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

它也会增加整体的高度和间距。谢谢基兰。