[英]Annotation forcing to appear inside stacked bar charts using Google Chart API
我有一個堆積條形圖，我需要在條形圖中注釋條形圖。
我成功地注釋了條形，但它出現在外面。
如何使用對比色強制條內的注釋。 我也用過這個類，但不幸的是沒有annotations.alwaysOutside
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); var bar_chart_data = [ ["Material", "Cost", "Profit", { "role": "style" }, { "role": "style" }], ["A", 235.53, 117.765, "color: blue", "color: red"], ["B", 35.28, 14.8176, "color: blue", "color: red"], ["C", 495, 207.9, "color: blue", "color: red"], ["D", 44.52, 18.6984, "color: blue", "color: red"], ["E", 69.56, 29.2152, "color: blue", "color: red"], ["F", 4.5, 1.89, "color: blue", "color: red"], ["G", 16.62, 6.9804, "color: blue", "color: red"], ["H", 74.88, 31.449599999999997, "color: blue", "color: red"], ["I", 21.2, 8.904, "color: blue", "color: red"], ["J", 4.8, 2.016, "color: blue", "color: red"], ["K", 400, 168, "color: blue", "color: red"], ["L", 4.88, 2.0496, "color: blue", "color: red"], ["M", 45, 18.9, "color: blue", "color: red"], ["N", 0, 0, "color: blue", "color: red"], ["O", 9, 3.78, "color: blue", "color: red"], ["P", 4, 1.68, "color: blue", "color: red"], ["Q", 4.16, 1.7472, "color: blue", "color: red"] ] function drawChart() { var data = google.visualization.arrayToDataTable(bar_chart_data); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 3, // <-- include style column 2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }, 4 // <-- include style column ]); var options = { title: "Live individual material cost break-up (%)", width: 600, height: 400, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: 'percent', hAxis: { textStyle: { fontSize: 8, fontName: 'Muli', bold: false, }, }, vAxis: { textStyle: { fontSize: 10, bold: false }, }, }; var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart")); chart.draw(view, options); } </script> <style> .ignore-css{all:unset;} </style> </head> <body> <div class="ignore-css" id="material_bar_chart" style="width: 900px; height: 500px;"></div> </body> </html>
正如您所指出的，沒有“始終在里面”的選項。
默認情況下，圖表通常會在其中放置注釋，
只要有足夠的空間。
在這種情況下，我相信它們沒有出現在里面的原因，
是因為字體太大。
由於字體已在軸上縮小，
減少注釋的字體，
允許將它們繪制在條形內部。
annotations: {
textStyle: {
fontSize: 8,
fontName: 'Muli',
bold: false,
},
},
請參閱以下工作片段...
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load("current", { packages: ["corechart"] }); google.charts.setOnLoadCallback(drawChart); var bar_chart_data = [ ["Material", "Cost", "Profit", { "role": "style" }, { "role": "style" }], ["A", 235.53, 117.765, "color: blue", "color: red"], ["B", 35.28, 14.8176, "color: blue", "color: red"], ["C", 495, 207.9, "color: blue", "color: red"], ["D", 44.52, 18.6984, "color: blue", "color: red"], ["E", 69.56, 29.2152, "color: blue", "color: red"], ["F", 4.5, 1.89, "color: blue", "color: red"], ["G", 16.62, 6.9804, "color: blue", "color: red"], ["H", 74.88, 31.449599999999997, "color: blue", "color: red"], ["I", 21.2, 8.904, "color: blue", "color: red"], ["J", 4.8, 2.016, "color: blue", "color: red"], ["K", 400, 168, "color: blue", "color: red"], ["L", 4.88, 2.0496, "color: blue", "color: red"], ["M", 45, 18.9, "color: blue", "color: red"], ["N", 0, 0, "color: blue", "color: red"], ["O", 9, 3.78, "color: blue", "color: red"], ["P", 4, 1.68, "color: blue", "color: red"], ["Q", 4.16, 1.7472, "color: blue", "color: red"] ] function drawChart() { var data = google.visualization.arrayToDataTable(bar_chart_data); var view = new google.visualization.DataView(data); view.setColumns([0, 1, { calc: "stringify", sourceColumn: 1, type: "string", role: "annotation" }, 3, // <-- include style column 2, { calc: "stringify", sourceColumn: 2, type: "string", role: "annotation" }, 4 // <-- include style column ]); var options = { title: "Live individual material cost break-up (%)", width: 600, height: 400, bar: { groupWidth: "95%" }, legend: { position: "none" }, isStacked: 'percent', annotations: { textStyle: { fontSize: 8, fontName: 'Muli', bold: false, }, }, hAxis: { textStyle: { fontSize: 8, fontName: 'Muli', bold: false, }, }, vAxis: { textStyle: { fontSize: 10, bold: false }, }, }; var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart")); chart.draw(view, options); } </script> <style> .ignore-css{all:unset;} </style> </head> <body> <div class="ignore-css" id="material_bar_chart" style="width: 900px; height: 500px;"></div> </body> </html>
使用 Google Chart API 在堆積條形圖中使用符號進行注釋
[英]Annotation with symbols inside stacked bar charts using Google Chart API
如何在Google api圖表的堆疊柱形圖中的條形底部使用批注顯示軸值？
[英]How to display the axis value using annotation in bottom of bar in stacked column chart of google api chart?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.