[英]Annotation with symbols inside stacked bar charts using Google Chart API
我有一個堆積條形圖，我需要用 $ 符號注釋條形圖，因為利潤和成本是貨幣。
我成功地注釋了沒有貨幣符號的條形，但我無法以 $ 為前綴進行顯示。 任何人都可以對此有所了解
<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); function drawChart() { var bar_chart_data = [ ["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }], ["A", 100, 25, 'color: #F9F528','color: #0ACB53'], ["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'], ["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'], ["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'], ["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'], ["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'], ["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'], ["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'], ] 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: { title: 'Percentage', textStyle: { fontSize: 8, fontName: 'Muli', bold: false, }, titleTextStyle: { fontSize: 12, fontName: 'Muli', bold: true, } }, vAxis: { title: 'Material', textStyle: { fontSize: 10, bold: false }, titleTextStyle: { fontSize: 12, bold: true } }, }; var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart")); chart.draw(view, options); } </script> </head> <body> <div id="material_bar_chart" style="width: 900px; height: 500px;"></div> </body> </html>
使用谷歌的NumberFormat類
您可以創建一個模式，並格式化每個數據列。
var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'});
formatCurr.format(data, 1);
formatCurr.format(data, 2);
請參閱以下工作片段...
<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); function drawChart() { var bar_chart_data = [ ["Material", "Cost", "Profit", { role: 'style' },{ role: 'style' }], ["A", 100, 25, 'color: #F9F528','color: #0ACB53'], ["B", 4.2, 1.764, 'color: #F9F528','color: #0ACB53'], ["C", 110, 46.199999999999996, 'color: #F9F528','color: #0ACB53'], ["D", 7.56, 3.1752, 'color: #F9F528','color: #0ACB53'], ["E", 4.24, 1.7808, 'color: #F9F528','color: #0ACB53'], ["F", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'], ["G", 2, 0.84, 'color: #F9F528','color: #0ACB53'], ["H", 0.8, 0.336, 'color: #F9F528','color: #0ACB53'], ] var data = google.visualization.arrayToDataTable(bar_chart_data); var formatCurr = new google.visualization.NumberFormat({pattern: '$#,##0'}); formatCurr.format(data, 1); formatCurr.format(data, 2); 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: { title: 'Percentage', textStyle: { fontSize: 8, fontName: 'Muli', bold: false, }, titleTextStyle: { fontSize: 12, fontName: 'Muli', bold: true, } }, vAxis: { title: 'Material', textStyle: { fontSize: 10, bold: false }, titleTextStyle: { fontSize: 12, bold: true } }, }; var chart = new google.visualization.BarChart(document.getElementById("material_bar_chart")); chart.draw(view, options); } </script> </head> <body> <div id="material_bar_chart" style="width: 900px; height: 500px;"></div> </body> </html>
注釋強制使用 Google Chart API 出現在堆積條形圖中
[英]Annotation forcing to appear 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?
React Google Charts - 堆積柱形圖 - 在條形圖上顯示注釋
[英]React Google Charts - Stacked Column Chart - Show Annotation on Bars
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.