使用Google Chart API强制将注释显示在堆积的条形图中

问题描述 投票：1回答：1

我有一个堆积的条形图，需要在条形图内注释条形。

我成功注释了条形，但是那是在外面显示的。

我如何用对比色强制注释在栏中。我也使用了此类，但不幸的是没有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>
javascript charts google-visualization google-barchart
1个回答
0
投票

正如您所指出的，“始终在内部”没有选项。图表通常会默认在其中放置注释，只要有足够的空间

在这种情况下，我相信它们没有出现在内部的原因，是因为字体太大。

由于字体已在轴上缩小，减少注释的字体，允许将它们绘制在条形图内。 

    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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.