如何縮小HighCharts中y軸上的數字之間的間距

Question

我有一個包含兩組數據的高圖表。數據的y軸上的數字彼此遠離。我一會兒看到了一個解決方案，一邊尋找別的東西，一邊找不到它爲我的生活。所以在重複一個問題的風險中，我怎樣才能讓160紅色像黃圈一樣靠近在一起。

如果我拼出來，它看起來像這個1 6 0，我需要看起來像這160.有誰知道什麼值控制嗎？

按照要求，這裏是我的代碼：

$(function() { 

    $('container').highcharts({  
    chart: { 
     zoomType: 'xy', 
     width: 640 
    }, 
    xAxis: [{ 
     categories: ['2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014', '2015'], 
     crosshair: true, 
     gridLineWidth: 1, 
     labels: { 
     style: { 
      fontSize: '15px' 
     } 
     } 
    }], 
    yAxis: [{ // Primary yAxis 
     gridLineWidth: 2, 
     tickInterval: 20, 
     fontWidth: 100, 
     title: { 
     text: '', 
     } 
    }, { // Secondary yAxis 
     tickInterval: 20, 
     title: { 
     text: 'Total Retrun %', 
     style: { 
      color: "#000000", 
      fontSize: '20px' 
     } 
     }, 
     labels: { 
     format: '{value}', 
     style: { 
      color: "#000000", 
      fontSize: '20px' 
     } 
     } 
    }, ], 
    legend: { 
     layout: 'horizontal', 
     align: 'center', 
     x: 0, 
     verticalAlign: 'top', 
     y: 0, 
     floating: true, 
     backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF', 
    itemStyle: { 
     font: '15pt Helvetica', 
     }, 
    }, 
    series: [{ 
     name: 'AirTransport', 
     type: 'column', 
     yAxis: 1, 
     data: [22.5, -1.9, -32.6, 22.3, 33.4, -6.1, 19.2, 50.7, 28.1, -8.6], 
     tooltip: { 
     valueSuffix: '' 
     }, 
     pointWidth: 35, 
     color: "#b3b3b3" 
    }, { 
     marker: { 
     fillColor: '#FFFFFF', 
     lineWidth: 1, 
     lineColor: null 
     }, 
     name: 'S&P 500', 
     type: 'line', 
     yAxis: 1, 
     data: [15.8, 5.5, -37.0, 26.5, 25.0, 2.1, 16.0, 32.4, 23.7], 
     color: "#000000" 
    }] 
     }); 
}); 

Answer 1

由於兩個wergeld和Halvor斯特蘭德指出，需要更清楚地界定爲標籤的字體屬性。

這裏是爲您的y軸修訂組值：我

yAxis: [{ // Primary yAxis 
    gridLineWidth: 2, 
    tickInterval: 20, 
    fontWidth: 100, 
    title: { 
    text: 'S&P value', 
    style: { 
     color: "#000000", 
     font: '20px Arial, sans-serif' 
    } 
    }, 
    opposite: true, 
    labels: { 
    format: '{value}', 
    style: { 
     color: "#000000", 
     font: '20px Arial, sans-serif' 
    } 
    } 
}, { // Secondary yAxis 
    tickInterval: 20, 
    title: { 
    text: 'Total Return %', 
    style: { 
     color: "#000000", 
     font: '20px Arial, sans-serif' 
    } 
    }, 
    labels: { 
    format: '{value}', 
    style: { 
     color: "#000000", 
     font: '20px Arial, sans-serif' 
    } 
    } 
}, ], 

注意如何有利於font屬性刪除fontSize屬性。根據我的經驗，這是非常有用和多功能的。

下面是從我的變化的結果：

我發現和糾正代碼中的其他幾個項目：

• 你有兩個您的系列設置爲顯示在同一的yAxis值。我讓他們截然不同。
• 我將屬性opposite: true添加到您的y軸之一，因此它會出現在右側（請參閱演示http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/combo-dual-axes/）。
• 您的聲明$('#container').highcharts({缺少#標誌。這將阻止您的圖表出現在具有該ID的<div>元素中。

下面是修改後的小提琴：http://jsfiddle.net/brightmatrix/pLort0mj/

我希望這能解決你的問題，並一直對你有幫助！