2017-09-16 86 views
0

的目標是使柱狀圖像這樣在顯示百分比值的圖像,而且在MillionTonnes: enter image description hereHighcharts如何將一個額外的價值添加到酒吧

條所代表的百分比值。百萬噸的價值只是額外的信息。這兩個值都可以在欄的最後顯示,百分比應該先顯示,然後顯示百萬噸值。例如: 49%(4960萬噸)。我怎樣才能讓這兩個值出現在欄的最後?這是我的代碼。 TIA

Highcharts.chart('grafica1', { 
 
    chart: { 
 
    type: 'column', 
 
    inverted: true, 
 
    plotBackgroundColor: null, 
 
    plotBorderWidth: 0, 
 
    plotShadow: false 
 
    }, 
 
    title: { 
 
    text: ' ' 
 
    }, 
 
    xAxis: { 
 
    type: 'category', 
 
    labels: { 
 
     useHTML: true 
 
    } 
 
    }, 
 
    yAxis: { 
 
    min: 0, 
 
    max: 100, 
 
    title: { 
 
     text: null, 
 
    }, 
 
    labels: { 
 
     enabled: false, 
 
    } 
 
    }, 
 
    legend: { 
 
    enabled: false 
 
    }, 
 
    tooltip: { 
 
    enabled: false 
 
    }, 
 
    plotOptions: { 
 
    series: { 
 
     borderWidth: 0, 
 
     dataLabels: { 
 
     enabled: true, 
 
     format: '({point.y:.1f} Million tones)%' 
 
     } 
 
    } 
 
    }, 
 
    responsive: { 
 
    rules: [{ 
 
     condition: { 
 
     maxWidth: 500 
 
     }, 
 
     chartOptions: { 
 
     chart: { 
 
      inverted: false 
 
     }, 
 
     legend: { 
 
      align: 'center', 
 
      verticalAlign: 'bottom', 
 
      layout: 'horizontal' 
 
     } 
 
     } 
 
    }] 
 
    }, 
 
    series: [{ 
 
    name: 'Production', 
 
    colorByPoint: true, 
 
    data: [{ 
 
     name: 'PACKAGING PAPERS<br>AND BOARDS', 
 
     y: 49, 
 
     color: '#005eb8', 
 
    }, { 
 
     name: 'CASE MATERIALS', 
 
     y: 29.9, 
 
     color: '#fff', 
 
     borderWidth: 2, 
 
     borderColor: '#005eb8' 
 
    }, { 
 
     name: 'OTHER PACKAGING & PAPER', 
 
     y: 14.4, 
 
     color: '#fff', 
 
     borderWidth: 2, 
 
     borderColor: '#005eb8' 
 
    }, { 
 
     name: 'WRAPPINGS', 
 
     y: 4.7, 
 
     color: '#fff', 
 
     borderWidth: 2, 
 
     borderColor: '#005eb8' 
 
    }] 
 
    }] 
 
});
<script src="https://code.highcharts.com/highcharts.js"></script> 
 

 
<div id="grafica1" class="chart1Slide2"></div>

回答

相關問題