Highcharts值在一列中

Question

我想上條形圖（34.4，21.8，20.1等）的右側所示的值對準到圖表的遠側如示於下圖中：

原文：

期望中的正確的價值觀的陣營： Desired http://i47.tinypic.com/1zoxdu8.jpg

我使用HighCharts，我的代碼是：

$(function() { 
    var chart; 
    $(document).ready(function() { 
     chart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'container', 
       type: 'column', 
       margin: [ 50, 50, 100, 80], 
       inverted: true 
      }, 
      title: { 
       text: 'World\'s largest cities per 2008' 
      }, 
      xAxis: { 
       categories: [ 
        'Tokyo', 
        'Jakarta', 
        'New York', 
        'Seoul', 
        'Manila', 
        'Mumbai', 
        'Sao Paulo', 
        'Mexico City', 
        'Dehli', 
        'Osaka', 
        'Cairo', 
        'Kolkata', 
        'Los Angeles', 
        'Shanghai', 
        'Moscow', 
        'Beijing', 
        'Buenos Aires', 
        'Guangzhou', 
        'Shenzhen', 
        'Istanbul' 
       ], 
       labels: { 
        rotation: 0, 
        align: 'right', 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Population (millions)' 
       } 
      }, 
      legend: { 
       enabled: false 
      }, 
      tooltip: { 
       formatter: function() { 
        return '<b>'+ this.x +'</b><br/>'+ 
         'Population in 2008: '+ Highcharts.numberFormat(this.y, 1) + 
         ' millions'; 
       } 
      }, 
       series: [{ 
       name: 'Population', 
       data: [34.4, 21.8, 20.1, 20, 19.6, 19.5, 19.1, 18.4, 18, 
        17.3, 16.8, 15, 14.7, 14.5, 13.3, 12.8, 12.4, 11.8, 
        11.7, 11.2], 
       dataLabels: { 
        enabled: true, 
        rotation: 0, 
        color: 'Black', 
        align: 'right', 
        //x: parseFloat(this.y) + 10, 
        x: 40, 
        y: 10, 
        formatter: function() { 
         return this.y; 
        }, 
        style: { 
         fontSize: '13px', 
         fontFamily: 'Verdana, sans-serif' 
        } 
       } 
      }] 
     }); 
    }); 
}); 

我有一個jsFiddle here

Answer 1

我認爲這是不可能使用它的API還沒有做到這一點。
但是，下面的代碼可以爲你做到這一點：

// #container是你的圖表容器的id

$('#container .highcharts-data-labels g').attr('transform', function(i, value) { 
    return value.replace(/\d+/, chart.containerWidth - 150); 
}); 

如果您檢查您的圖表內容，你會看到，每個標籤具有transform ATTR，這用於將標籤放入圖表中，因此上面的代碼將替換其屬性的第一個參數（x）。

demo

Answer 2

我必須爲我的一個項目做到這一點。這是小提琴。 http://jsfiddle.net/kashyap02004/veJ38/。

基本上你不得不渲染這樣的價值觀：

$('#container').highcharts({ 
    chart: { 
     type: 'bar' 
    }, 
    title: { 
     text: 'Historic World Population by Region' 
    }, 
    subtitle: { 
     text: 'Source: Wikipedia.org' 
    }, 
    xAxis: { 
     categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'], 
     title: { 
      text: null 
     } 
    }, 
    yAxis: { 
     min: 0, 
     title: { 
      text: 'Population (millions)', 
      align: 'high' 
     }, 
     labels: { 
      overflow: 'justify' 
     } 
    }, 
    tooltip: { 
     valueSuffix: ' millions' 
    }, 
    plotOptions: { 
     bar: { 
      dataLabels: { 
       enabled: false 
      } 
     } 
    }, 
    credits: { 
     enabled: false 
    }, 
    series: [{ 
     name: 'Year 1800', 
     data: [107, 31, 645, 203, 20] 
    }] 
}, 

//這是所有魔術發生

function (chart) { 
    for (var i = 0; i < chart.series[0].data.length; i++) { 
     var point = chart.series[0].data[i]; 

     var text = chart.renderer.text(
     point.y, // you can display any property on that object. 
     //tweek these values to align it 
     chart.plotLeft + chart.plotSizeY - 30, 
     chart.plotHeight - point.barX + 45).attr({ 
      zIndex: 5, 
      fill: '#666679', 
     }).add(); 
    } 
});