1

如何在烛台 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/

4

2 回答 2

3

我找到了解决方案。关键是使用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/

于 2014-10-09T08:36:00.813 回答
1

你可以在谷歌上阅读数据表和数据视图

代替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);
于 2015-01-19T11:26:19.167 回答