Chartist.js - 增加Y軸縮放點之間的間距

我正在開發一個個人項目，創建圖形以顯示Last FM API的音樂收聽習慣數據。Chartist.js - 增加Y軸縮放點之間的間距

我通過AJAX請求抓取JSON數據，然後使用返回的JSON對象填充使用Chartist.js JS庫創建的圖。

我有什麼我認爲是一個非常簡單的問題，我無法弄清楚如何增加圖表的整體大小？更具體地說，我想增加Y軸上每個縮放點之間的間距，以便更準確地看到每個數字是什麼。

我創建了以下JS小提琴顯示我的問題：

根據該文件，我相信我需要改變稱爲scaleMinSpace但在改變這個數字沒有變化似乎可選屬性發生。

任何幫助將是偉大的？！

var lastfm = {}; 
 

 
lastfm.tracker = (function(){ 
 

 
\t //Set up an object for DOM elements and data source 
 
\t var config = { 
 
\t \t getRecentTracksURL: "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json", 
 
\t \t getMostPopularArtistsURL: "http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=jimmersjukebox&api_key=6db1989bd348bf91797bad802c6645d8&format=json", 
 
\t \t user: "jimmersjukebox", 
 
\t \t recentTracksElement: $(".recent-tracks"), 
 
\t \t currentlyPlayingActiveClass: $(".current") 
 
\t }; 
 

 

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

 

 

 
\t var createPopularArtistsChart = function(){ 
 

 

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

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

 

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

 
\t \t \t }; 
 

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

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

 
\t \t }); 
 

 

 

 
\t }; 
 

 
\t return{ 
 
\t \t config: config, 
 
\t \t init: function(){ 
 
\t \t \t setupLastFM(); 
 
\t \t } 
 
\t }; 
 
})(); 
 
$(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>

來源

2014-10-20 James Howell

如果你給高度的選項，如

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

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

這將增加整體的高度和間距太大。謝謝基蘭。

來源

2015-07-30 07:13:34 kiran

這裏的代碼格式有點棘手（對我來說，作爲初學者:) - 代碼行需要每個4個空格的縮進，要正確縮進，可以選擇行並按下ctrl-k – kleopatra 2015-07-30 08:45:21

在[API]中看不到這些屬性（https://gionkunz.github.io/chartist-js/api-documentation.html#chartistcore-method-times） – vsync 2015-08-18 18:18:19

請檢查此鏈接https：//gionkunz.github .io/chartist-js/examples.html API中提供了所有的屬性。 – kiran 2015-08-21 08:39:21

Chartist.js - 增加Y軸縮放點之間的間距

回答

相關問題