highcharts根據負值/正值添加yAxis標籤

我有一個柱形圖，顯示美國和其他國家之間貿易平衡隨着時間的推移。highcharts根據負值/正值添加yAxis標籤

我需要能夠在圖表右側顯示正數是進口（正貿易差額），而負數是出口（負貿易差額）。

一個寫的不好的開始可以在此fiddle

我試圖用下面（醜陋的）添加代碼的輸入/輸出標籤中可以看出：

yAxis: [{ 

     title: { 
      text: 'Millions of Dollars' 
     } 
    },{ 
     opposite: true, 
     title : { 
      rotation: 0, 
      text: 'Imports', 
      x: 17, 
      y: -48 
     } 
    },{ 
     opposite: true, 
     title : { 
      rotation: 0, 
      text: 'Exports', 
      x: -40, 
      y : 5 
     } 
    }]

我期待創造類似yAxis上的一個類別，用於正值和負值，將正值標記爲進口值，將負值標記爲出口值。

想要保留高位圖，所以高配圖（下載等）附帶的所有不錯的選項都會顯示此次要yAxis標籤。

有沒有簡單的東西，我錯過了使這項工作？

謝謝！

來源

2016-04-22 tkwargs

我不明白，當我看到你的圖表上有它的進口/出口方面，你能更清楚嗎？ – JordanHendrix

如果問題是Highcharts是否具有內置的這種能力，答案是（a）我不知道，（b）我不這麼認爲，（c）你在做什麼可能是做的方法它。 – apokryfos

@JordanHendrix它確實顯示出來，但感覺太難看了，我的'x'和'y'值必須根據圖表大小手動更改。還需要在顯示類別時獲得的刻度標記行爲。 – tkwargs

既然你沒有自己的解決方案，這裏是我自己的骯髒的哈克解決方案，可能會更糟糕，但你至少不需要指定軸的位置（排序）。

這個想法是添加一個沒有名字的額外類別，添加另一個具有該類別的x值和名稱爲「導入」和「導出」的2點的系列。

您最終可以根據您擁有的數據導出這兩個「隱藏」點的值，以便它們可以自動調整。它很髒，但它的工作原理。

$(function() { 
    $('#container').highcharts({ 
     chart: { 
      type: 'column' 
     }, 
     title: { 
      text: 'Monthly Widget trade balance' 
     }, 

     xAxis: { 
      categories: [ 
       'Jan', 
       'Feb', 
       'Mar', 
       'Apr', 
       'May', 
       'Jun', 
       'Jul', 
       'Aug', 
       'Sep', 
       'Oct', 
       'Nov', 
       'Dec', 
       "" 
      ], 
      crosshair: true 
     }, 
     yAxis: [{ 

      title: { 
       text: 'Millions of Dollars' 
      } 
     }], 

     plotOptions: { 
      column: { 
       pointPadding: 0.2, 
       borderWidth: 0 
      } 
     }, 
     series: [ 
       {    
        type: "scatter",      
       color: "transparent", 
       data: [ { x:12, y:20,name:"Imports" }, { x:12, y:-20,name:"Exports" } ], 
       showInLegend: false, 
       dataLabels: { 
         enabled: true, 
        formatter: function() { return this.point.name; },      
        y: 10 
       } 
      }, 
     { 
      name: 'Canada', 
      data: [-83.6, -78.8, -98.5, -93.4, -66.0, -44.5, -105.0, -104.3, -91.2, -83.5, -106.6, -92.3] 

     }, { 
      name: 'Mexico', 
      data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] 

     }, { 
      name: 'England', 
      data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] 

     }] 
    }); 
});

見小提琴http://jsfiddle.net/r2etx98t/

來源

2016-04-22 14:05:22 apokryfos

我結束了使用下面的手動定位文本

見工作http://jsfiddle.net/0s17qt56/4/

摘錄如下

labels: { 
     items : [{ 
     html : 'Imports', 
     style : { 
      left: '710px', 
      top : '130px' 
     } 
     },{ 
     html : 'Exports', 
     style : { 
      left: '710px', 
      top : '70px' 
     } 
     }] 
    },

來源

2016-04-22 19:42:25 tkwargs

highcharts根據負值/正值添加yAxis標籤

回答

相關問題