2017-12-04 2 views
1

Google 차트에서 candlechart를 사용자 정의하려고합니다.Google 차트 촛대 색

enter image description here

사람들은 내가 제공하는 옵션은 다음과 같습니다 :

나는 양초 자체의 색상을 변경할 수 있지만, 라인의 하나는 최고 및 최저 값을 표시하지 않는 방법 발견

let options = { 
     legend: 'none', 
     candlestick: { 
     risingColor: {stroke: '#4CAF50', fill: 'white'}, 
     fallingColor: {stroke: '#F44336'} 
     } 
    } 

이 jsFiddle에 그것을 시도 할 수 있습니다 : https://jsfiddle.net/El_Matella/h5p36t3w/2/

나는 문서의 시간에 찾을 수 없습니다 그것을 바꾸려면 누군가 아이디어를 가지고 있습니까?

이 작업 조각을 다음을 참조
당신이 colors 옵션을 사용할 수 있습니다 당신은 모든 라인이 동일한 색으로 할 경우 ( https://developers.google.com/chart/interactive/docs/gallery/candlestickchart)

답변

2

, ...

google.charts.load('current', {'packages':['corechart']}); 
 

 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Mon', 20, 28, 38, 45], 
 
    ['Tue', 31, 38, 55, 66], 
 
    ['Wed', 50, 55, 77, 80], 
 
    ['Thu', 77, 77, 66, 50], 
 
    ['Fri', 68, 66, 22, 15] 
 
    // Treat first row as data as well. 
 
    ], true); 
 

 
    var options = { 
 
    legend:'none', 
 
    candlestick: { 
 
     risingColor: {stroke: '#4CAF50', fill: 'white'}, 
 
     fallingColor: {stroke: '#F44336'} 
 
    }, 
 
    colors: ['magenta'] 
 
    }; 
 

 
    var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); 
 

 
    chart.draw(data, options); 
 
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div" style="width: 900px; height: 500px;"></div>

+0

감사합니다. – Hammerbot