LineChart with annotations and multiple graph lines

白昼怎懂夜的黑 提交于 2020-01-06 23:51:19

问题


I'm using Google Charts to try and create a line chart that looks like the first one labelled Example:

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

However, I cannot use google.visualization.arrayToDataTable() as shown in the 1st example.

The problem is I want to add annotations and annotationText to each plotted point. The documentation says I must use:

google.visualization.DataTable()

In order to do that, i must do the following:

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

This gives me one line of plotted data.

How do I adapt this to allow me to add a 2nd line of plotted data?goo


回答1:


You have to add additional columns and expand your data. For example:

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

See example at jsBin



来源:https://stackoverflow.com/questions/20722738/linechart-with-annotations-and-multiple-graph-lines

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!