highchart의 모든 줄의 색상을 BG 소용하는 방법을

Question

$(function() { 
 
    $('#container').highcharts({ 
 
    chart: { 
 
     type: 'bar' 
 
    }, 
 
    title: { 
 
     text: 'Stacked bar chart' 
 
    }, 
 
    xAxis: { 
 
     categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'] 
 
    }, 
 
    yAxis: { 
 
     min: 0, 
 
     max: 10, 
 
     title: { 
 
     text: 'Total fruit consumption' 
 
     } 
 
    }, 
 
    legend: { 
 
     reversed: true 
 
    }, 
 
    plotOptions: { 
 
     series: { 
 
     stacking: 'normal' 
 
     } 
 
    }, 
 
    series: [{ 
 
     name: 'John', 
 
     data: [5, 3, 4, 7, 2] 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="http://code.highcharts.com/highcharts.js"></script> 
 
<script src="http://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

당신은 내가 나머지 (10-7 = 3) ramining 포도, 예를 들어 말하는 data..Now의 파란색 표시를 볼 수 있습니다 초록색으로 표시하고 싶다. 데이터가 파란색이고 나머지는 소비되지 않은 부분이 녹색으로 보입니다. 그것은 다른 데이터를 직렬로 제공하는 것을 선호하지 않기 때문에 막대의 배경색과 비슷해야합니다.

Answer 1

하이 차트 막대에는 배경색이 없으므로 다른 시리즈를 만들거나 하이 차트 코드를 수정하지 않고도이 작업을 수행 할 수 있다고 생각하지 않습니다.

동적 코드 라인의 단지 몇에서 '나머지'시리즈를 만들 수 있습니다

chartConfig.series.push({ 
    name: 'Remainder', 
    index: 0, 
    data: chartConfig.series[0].data.map(function(value) { return maxFruit - value }) 
}) 

http://jsfiddle.net/s261qdfr/