Google 차트 촛대에서 범례 레이블을 설정하는 방법

Question

촛대 Google 차트에서 차트 범례의 계열 레이블을 설정하려면 어떻게해야합니까?

코드 :

var chart_options = { 
    legend: { 
     position: 'bottom' 
    } 
}; 

var chartdata = [ 
    [new Date(2014, 3, 1), 95,100,98,110, null,null,null,null], 
    [new Date(2014, 3, 2), 98,98,102,103, null,null,null,null], 
    [new Date(2014, 3, 3), 90,102,95,105, 91,103,96,106], 
    [new Date(2014, 3, 4), 93,95,103,103, 94,96,104,104], 
    [new Date(2014, 3, 5), 94,103,104,105, 95,104,105,106], 
]; 


chart1 = new google.visualization.CandlestickChart(document.getElementById('chart')); 
chart1.draw(google.visualization.arrayToDataTable(chartdata,true), chart_options); 

출처 : 나는 해결책을 발견했습니다 http://jsfiddle.net/martinba/xt7cvv3k/

Answer 1

.

// this is correct 
var chartdata = new google.visualization.DataTable(); 
chartdata.addColumn(...); 
chartdata.addRows(...); 
chart1.draw(chartdata, chart_options); 

대신 google.visualization.arrayToDataTable (... 사실) :

// this is wrong 
var chartdata = [...]; 
chart1 = new google.visualization.CandlestickChart(document.getElementById('chart')); 
chart1.draw(google.visualization.arrayToDataTable(chartdata,true), chart_options); 

전체 작업 JS의 핵심은 google.visualization.DataTable와 구문을 사용하는 것입니다 :

var chart_options = { 
    legend: { 
     position: 'bottom' 
    }, 
    hAxis: { 
     //format: "H:mm" 
    } 
}; 

var chartdata = new google.visualization.DataTable(); 
chartdata.addColumn('datetime', 'Datum'); 
chartdata.addColumn('number', 'label 1'); 
chartdata.addColumn('number', ''); 
chartdata.addColumn('number', ''); 
chartdata.addColumn('number', ''); 
chartdata.addColumn('number', 'label 2'); 
chartdata.addColumn('number', ''); 
chartdata.addColumn('number', ''); 
chartdata.addColumn('number', '');  
chartdata.addRows([ 
    [new Date(2014, 3, 1), 95,100,98,110, null,null,null,null], 
    [new Date(2014, 3, 2), 98,98,102,103, null,null,null,null], 
    [new Date(2014, 3, 3), 90,102,95,105, 91,103,96,106], 
    [new Date(2014, 3, 4), 93,95,103,103, 94,96,104,104], 
    [new Date(2014, 3, 5), 94,103,104,105, 95,104,105,106], 
]); 


chart1 = new google.visualization.CandlestickChart(document.getElementById('chart')); 
chart1.draw(chartdata, chart_options); 

jsfiddle : http://jsfiddle.net/martinba/xt7cvv3k/6/

,

Answer 2

당신은 첫 번째 행의 데이터 또는 라벨인지 끝에 boolean가 표시 datatables and dataview on google

대신 google.visualization.arrayToDataTable(...,true):

사용 google.visualization.arrayToDataTable(...,false): 를 읽을 수 있습니다.

f.e: 
var data = google.visualization.arrayToDataTable([ 
     ['Experiment', 'Control','Control1','Control2','Control3','All','All1','All2','All3'], 
     ['1236', 90,102,95,105, 91,103,96,106], 
     ['1237', 93,95,103,103, 94,96,104,104], 
     ['1238', 94,103,104,105, 95,104,105,106]    
     ], 
     false); // 'false' means that the first row contains labels, not data. 


    chart1 = new google.visualization.CandlestickChart(document.getElementById('chart')); 
    chart1.draw(data, chart_options);