如何在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

我已經找到了解決辦法。關鍵是要使用的語法與google.visualization.DataTable：

// 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：

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

您可以閱讀datatables and dataview on google

，而不是google.visualization.arrayToDataTable(...,true):

使用google.visualization.arrayToDataTable(...,false): 的boolean在最後表示是第一次行是否是數據或標籤。

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);