2017-09-16 9 views
0
の目標は、この割合の値を示す写真で1もMillionTonnesのように棒グラフを作ることです

enter image description hereHighcharts

バーがパーセント値を表しています。百万トンの価値はちょっとした情報です。両方の値はバーの最後に表示され、パーセントが最初に表示され、次に100万トンの値が表示されます。何かが好き: 49%(49.6百万トン)。この2つの値をバーの最後に表示させるにはどうすればよいですか?これは私のコードです。 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>

答えて

1

それが可能だstackingオプション(Doc)を使用。

ここでの作業fiddle