HighCharts - 如何對齊（對齊）xAxis標籤左右

我想對齊x軸標籤並將左側的圖像左對齊到左側的y軸，並將右側的圖像右對齊到圖中顯示的y軸下面：HighCharts - 如何對齊（對齊）xAxis標籤左右

enter image description here

這裏是x軸和y軸的系列相關的代碼：

var chart2 = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'discount_chart', 
    type: 'line' 
    }, 
    title: { 
    text: "#{title_text_sense}" 
    }, 
    xAxis: { 
    title: { text: 'Price Range - $' }, 
    categories: #{price_array}, 
    showLastLabel: true, 
    }, 
    yAxis: [{ 
    min: 0, 
    type: 'linear', 
    title: { text: 'Rate of Return - %' } 
    },{ 
    min: 0, 
    type: 'linear', 
    title: { text: 'Disc. N.Rev./Invest.(ROI)' }, 
    opposite: true 
    }],

注意，變量從數據庫中讀出，以便使用該price_array定義x軸包含這個例子的值：

[ 「$ 60.00」，「70.00 $」，「$ 80.00」，「90.00 $」，「$ 100.00」]

有沒有辦法在HighCharts做到這一點？

謝謝。

巴拉特

來源

2012-09-21 Bharat

我不知道如果這個問題是非常明顯的，和的jsfiddle將不勝感激，以及 –

你好面頰，感謝你的迴應。這裏是一個jsFiddle鏈接：http://jsfiddle.net/rv46j/1/ – Bharat

我想要做的是獲得$ 60.00左對齊y軸0是因此消除圖表行開始的空白空間在左邊。同樣，$ 100.00應該是圖形切斷的位置，而不是在圖形終止點$ 100.00處留下空的空間。希望澄清我的問題。 – Bharat

感謝您的時間。對此，我真的非常感激。但我明白了這一點。這是我發佈的原始jsFiddle鏈接的一個分支。它正是我想要做的。基本上，我刪除了xAxis中的類別選項，然後使用xAxis的自定義標籤格式化程序;它爲我做了詭計。下面是

我Highcharts JavaScript代碼來做到這一點：

var x_labels = ["$60.00","$70.00","$80.00","$90.00","$100.00"]; 
var chart2 = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'discount_chart', 
     type: 'line' 
    }, 
    title: { 
     text: "Big Wells 2 Economic Sensitivity Plot" 
    }, 
    xAxis: { 
     title: { 
      text: 'Price Range - $' 
     }, 
     labels: { 
      formatter: function() { 
       return x_labels[this.value]; 
      } 
     }, 
     showLastLabel: true, 
    }, 
    yAxis: [{ 
     min: 0, 
     type: 'linear', 
     title: { 
      text: 'Rate of Return - %' 
     }}, 
    { 
     min: 0, 
     type: 'linear', 
     title: { 
      text: 'Disc. N.Rev./Invest.(ROI)' 
     }, 
     opposite: true}], 
    tooltip: { 
     formatter: function() { 
      var seriesName = { 
       'Rate of Return': 'ROR', 
       'Return on Investment': 'ROI' 
      }[this.series.name]; 
      return '<b>' + this.series.name + '</b><br/>Price = ' + x_labels[this.x] + ', ' + seriesName + ' = ' + (Math.round(this.y * 1000)/1000); 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'right', 
     verticalAlign: 'top', 
     x: -20, 
     y: 100, 
     borderWidth: 0 
    }, 
    plotOptions: { 
     series: { 
      marker: { 
       enabled: false, 
       states: { 
        hover: { 
         enabled: true 
        } 
       } 
      } 
     } 
    }, 
    series: [{ 
     name: 'Rate of Return', 
     color: 'red', 
     data: [-4.608072102337354, -0.738803860865155, 4.653294970652549, 8.92228974293352, 14.025752639875485], 
     pointStart: 0}, 
    { 
     name: 'Return on Investment', 
     color: 'blue', 
     data: [0.5863077142857144, 0.7098245714285715, 0.8340802857142857, 0.9587922857142858, 1.083803], 
     pointStart: 0, 
     yAxis: 1}] 
});

jSFiddle Demo of above code to fork:

來源

2012-09-22 17:50:21 Bharat

先生，我很抱歉，爲什麼你要通過使用格式化程序並在圖表選項之外維護一組類別來完成這一任務，當它可以像''pointPlacement：'on'一樣輕鬆完成？ –

這是一個BRILLIANT解決方案，它可以幫助我在使用類別與其他類型數據時在我的座標軸中看到的奇怪偏移量。非常感謝你！ –

應設置plotOptions.line.pointPlacement屬性

pointPlacement：字符串

可能值：空，「上」，「間」。

在柱狀圖中，當pointPlacement爲「on」時，該點不會創建任何對X軸的填充。如果pointPlacement爲「之間」，則的列將在刻度之間進行佈局。這對於例如用於可視化兩個時間點之間的數量或在極座標圖的某個特定的扇區中是有用的。缺省爲空。

儘管上面的API參考文獻提到它適用於柱狀圖，它一般適用於任何類別圖表。
既然你不想要填充，你需要將其設置爲"on"

plotOptions: { 
    series: {    
     pointPlacement: "on" 
    } 
},

Category Charts starting from origin @ jsFiddle

來源

2012-09-22 17:24:30

HighCharts - 如何對齊（對齊）xAxis標籤左右

回答

相關問題