如何向分段的Google圖表添加註釋？

Question

我有2個Google條形圖，一個堆積，一個沒有。我需要爲兩個圖表中的每個細分添加註釋。我怎樣才能做到這一點？

google.load('visualization', '1', { 
    'packages': ['corechart', 'table'] 
}); 
google.setOnLoadCallback(drawCharts); 

function drawCharts() { 
    drawSixMonthHistory(); 
    drawTagBreakdown(); 
}; 


function drawSixMonthHistory() { 
    var data = google.visualization.arrayToDataTable([ 
    ["Calendars", "Calendar A", "Calendar B", "Calendar C"], 
    ["Dec, 2015", 0, 0, 0], 
    ["Jan, 2016", 0, 0, 0], 
    ["Feb, 2016", 0, 0, 0], 
    ["Mar, 2016", 0, 0, 0], 
    ["Apr, 2016", 3, 0, 2], 
    ["May, 2016", 6, 2, 1] 
    ]); 
    var view = new google.visualization.DataView(data); 

    var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthHistory')); 
    chart.draw(view, { 
    fontName: 'Roboto', 
    enableInteractivity: false, 
    backgroundColor: 'transparent', 
    annotations: { 
     alwaysOutside: true 
    }, 
    chartArea: { 
     width: '90%' 
    }, 
    vAxis: { 
     viewWindowMode: 'explicit', 
     format: '##0', 
     viewWindow: { 
     min: 0 
     } 
    }, 
    legend: { 
     position: 'bottom', 
     maxLines: 3 
    }, 
    isStacked: true 
    }); 
} 

function drawTagBreakdown() { 
    var data = google.visualization.arrayToDataTable([ 
    ["tags", "Tag A", "Tag B", "Tag C"], 
    ["Dec, 2015", 0, 0, 0], 
    ["Jan, 2016", 0, 0, 0], 
    ["Feb, 2016", 0, 0, 0], 
    ["Mar, 2016", 0, 0, 0], 
    ["Apr, 2016", 3, 1, 3], 
    ["May, 2016", 2, 1, 5] 
    ]); 
    var view = new google.visualization.DataView(data); 

    var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthTagHistory')); 
    chart.draw(view, { 
    fontName: 'Roboto', 
    enableInteractivity: false, 
    backgroundColor: 'transparent', 
    annotations: { 
     alwaysOutside: true 
    }, 
    chartArea: { 
     width: '90%' 
    }, 
    vAxis: { 
     viewWindowMode: 'explicit', 
     format: '##0', 
     viewWindow: { 
     min: 0 
     } 
    }, 
    legend: { 
     position: 'bottom', 
     maxLines: 3 
    } 
    }); 
} 

jsfiddle

Answer 1

可以使用view.setColumns添加annotation columns每個值

看下面的例子...

google.charts.load('current', {packages: ['corechart', 'table']}); 
 
google.charts.setOnLoadCallback(drawCharts); 
 

 
function drawCharts() { 
 
    drawSixMonthHistory(); 
 
    drawTagBreakdown(); 
 
}; 
 

 
function drawSixMonthHistory() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["Calendars", "Calendar A", "Calendar B", "Calendar C"], 
 
    ["Dec, 2015", 0, 0, 0], 
 
    ["Jan, 2016", 0, 0, 0], 
 
    ["Feb, 2016", 0, 0, 0], 
 
    ["Mar, 2016", 0, 0, 0], 
 
    ["Apr, 2016", 3, 0, 2], 
 
    ["May, 2016", 6, 2, 1] 
 
    ]); 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 1, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    2, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 2, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    3, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 3, 
 
     type: "string", 
 
     role: "annotation" 
 
    } 
 
    ]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthHistory')); 
 
    chart.draw(view, { 
 
    fontName: 'Roboto', 
 
    enableInteractivity: false, 
 
    backgroundColor: 'transparent', 
 
    annotations: { 
 
     //alwaysOutside: true 
 
    }, 
 
    chartArea: { 
 
     width: '90%' 
 
    }, 
 
    vAxis: { 
 
     viewWindowMode: 'explicit', 
 
     format: '##0', 
 
     viewWindow: { 
 
     min: 0 
 
     } 
 
    }, 
 
    legend: { 
 
     position: 'bottom', 
 
     maxLines: 3 
 
    }, 
 
    isStacked: true 
 
    }); 
 
} 
 

 
function drawTagBreakdown() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ["tags", "Tag A", "Tag B", "Tag C"], 
 
    ["Dec, 2015", 0, 0, 0], 
 
    ["Jan, 2016", 0, 0, 0], 
 
    ["Feb, 2016", 0, 0, 0], 
 
    ["Mar, 2016", 0, 0, 0], 
 
    ["Apr, 2016", 3, 1, 3], 
 
    ["May, 2016", 2, 1, 5] 
 
    ]); 
 
    var view = new google.visualization.DataView(data); 
 
    view.setColumns([0, 1, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 1, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    2, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 2, 
 
     type: "string", 
 
     role: "annotation" 
 
    }, 
 
    3, 
 
    { 
 
     calc: "stringify", 
 
     sourceColumn: 3, 
 
     type: "string", 
 
     role: "annotation" 
 
    } 
 
    ]); 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('sixMonthTagHistory')); 
 
    chart.draw(view, { 
 
    fontName: 'Roboto', 
 
    enableInteractivity: false, 
 
    backgroundColor: 'transparent', 
 
    annotations: { 
 
     alwaysOutside: true 
 
    }, 
 
    chartArea: { 
 
     width: '90%' 
 
    }, 
 
    vAxis: { 
 
     viewWindowMode: 'explicit', 
 
     format: '##0', 
 
     viewWindow: { 
 
     min: 0 
 
     } 
 
    }, 
 
    legend: { 
 
     position: 'bottom', 
 
     maxLines: 3 
 
    } 
 
    }); 
 
}

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="sixMonthHistory"></div> 
 
<div id="sixMonthTagHistory"></div>

還，建議使用loader.js代替舊庫jsapi
看到Load the Libraries