2014-04-15 5 views
4

면적 스플라인 차트에서 스플라인 위의 영역 색상을 채 웁니다. 음수 채우기 색상을 설정하려했지만 결과가 없습니다. 누구나 아래에 있지 않고 스플라인 위에 영역 색상을 채우는 방법을 알려 줄 수 있습니까? 도움이 될 것입니다.AreaSpline 그래프의 음수 채우기 색

$(function() { 
     $('#container').highcharts({ 
      chart: { 
       type: 'areaspline' 
      }, 
      title: { 
       text: 'Average fruit consumption during one week' 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'left', 
       verticalAlign: 'top', 
       x: 150, 
       y: 100, 
       floating: true, 
       borderWidth: 1, 
       backgroundColor: '#FFFFFF' 
      }, 
      xAxis: { 
       categories: [ 
        'Monday', 
        'Tuesday', 
        'Wednesday', 
        'Thursday', 
        'Friday', 
        'Saturday', 
        'Sunday' 
       ], 
       plotBands: [{ // visualize the weekend 
        from: 4.5, 
        to: 6.5, 
        color: 'rgba(68, 170, 213, .2)', 
       }] 
      }, 
      yAxis: { 
       title: { 
        text: 'Fruit units' 
       } 
      }, 
      tooltip: { 
       shared: true, 
       valueSuffix: ' units' 
      }, 
      credits: { 
       enabled: false 
      }, 
      plotOptions: { 
       areaspline: { 
        fillOpacity: 0.5 
       } 
      }, 
      series: [{ 
       name: 'John', 
       data: [3, 4, 3, 5, 4, 10, 12], 
       negativeFillColor: '#000000' 
      }, { 
       name: 'Jane', 
       data: [1, 3, 4, 3, 3, 5, 4], 
       negativeFillColor: '#000000' 
      }] 
     }); 
    }) 

;

감사합니다, M

+0

당신이 일 포함 할 수 있습니다 그냥 당신이

  • endOnTick: false
  • maxPadding: 0
  • threshold: max_value_in_data

참조 설정해야합니다 전자 코드? – arco444

+0

안녕하세요, 질문에 제 코드를 추가했습니다. 한번 봐주세요. 감사합니다 – Maverick

답변

1

음, 임계 값은 작동합니다. http://jsfiddle.net/3bQne/1076/

코드 :

var data = [3, 4, 3, 5, 4, 10, 12]; 

Array.prototype.max = function() { 
    return Math.max.apply(null, this); 
} 

$('#container').highcharts({ 
    chart: { 
     type: 'areaspline' 
    }, 
    yAxis: { 
     endOnTick: false, 
     maxPadding: 0 
    }, 
    plotOptions: { 
     areaspline: { 
      threshold: data.max(), 
     } 
    }, 
    series: [{ 
     data: data, 
     negativeFillColor: 'rgba(255, 0, 0, 0.5)' 
    }] 
}); 
+0

negativeFillColor - 훌륭합니다! 내가 찾고 있었고 깨닫지 못한 해결책이 구워졌습니다. [하이 차트의 예] (http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/) 트리/마스터/샘플/하이 차트 /지도/시리즈 - 네거티브 컬러 /) – veeTrain