如何在Google Chart Candlestick中设置图例标签

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（...，true）：

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