線型圖有註釋和多圖線

Question

我使用谷歌圖表，試圖創建一個折線圖，看起來像標記示例第一個：

https://developers.google.com/chart/interactive/docs/gallery/linechart

但是，我不能使用google.visualization。 arrayToDataTable（）如第一個示例所示。

問題是我想添加註釋和annotationText到每個繪製點。該文件說，我必須使用：

google.visualization.DataTable（）

爲了做到這一點，我必須做到以下幾點：

var data1 = [ 
     [ 'C' ,4, 'o', 'note'], 
     [ 'D' ,6, 'o', 'note'], 
     [ 'O' ,4, 'o', 'note'] 
    ]; 
    var chartData = new google.visualization.DataTable(); 

    chartData.addColumn('string', 'X'); // Implicit series 1 data col. 
    chartData.addColumn('number', 'DOGS'); // Implicit domain label col. 
    chartData.addColumn({type:'string', role:'annotation'}); 
    chartData.addColumn({type:'string', role:'annotationText'}); 

    chartData.addRows(data1); 
    var chart = new  
      google.visualization.LineChart(document.getElementById('visualization')); 

    var options = { 
      title: "My Title",        
    }; 
    chart.draw(chartData,options); 

這讓我繪製一行數據。

如何適應這讓我補充繪製數據的第二行？咕

Answer 1

您必須添加額外的列和擴展您的數據。例如：

chartData.addColumn('string', 'X'); // Implicit series 1 data col. 
    chartData.addColumn('number', 'DOGS'); // Implicit domain label col. 
    chartData.addColumn({type:'string', role:'annotation'}); 
    chartData.addColumn({type:'string', role:'annotationText'}); 
    chartData.addColumn('number', 'CATS'); // Implicit domain label col. 
    chartData.addColumn({type:'string', role:'annotation'}); 
    chartData.addColumn({type:'string', role:'annotationText'}); 

    var data1 = [ 
     [ 'C', 4, 'Dog1', 'Dog1 note', 7, 'Cat1', 'Cat1 note'], 
     [ 'D', 6, 'Dog2', 'Dog2 note', 11, 'Cat2', 'Cat3 note'], 
     [ 'O', 4, 'Dog3', 'Dog3 note', 13, 'Cat3', 'Cat3 note'] 
    ]; 

    chartData.addColumn('string', 'X'); // Implicit series 1 data col. 
    chartData.addColumn('number', 'DOGS'); // Implicit domain label col. 
    chartData.addColumn({type:'string', role:'annotation'}); 
    chartData.addColumn({type:'string', role:'annotationText'}); 
    chartData.addColumn('number', 'CATS'); // Implicit domain label col. 
    chartData.addColumn({type:'string', role:'annotation'}); 
    chartData.addColumn({type:'string', role:'annotationText'}); 

    var data1 = [ 
     [ 'C', 4, 'Dog1', 'Dog1 note', 7, 'Cat1', 'Cat1 note'], 
     [ 'D', 6, 'Dog2', 'Dog2 note', 11, 'Cat2', 'Cat3 note'], 
     [ 'O', 4, 'Dog3', 'Dog3 note', 13, 'Cat3', 'Cat3 note'] 
    ]; 

    chartData.addRows(data1); 

見example at jsBin