使用 Google 图表 API 在堆叠条形图中使用符号进行注释

Question

我有一个堆积条形图，我需要用 $ 符号注释条形图，因为利润和成本是货币。

我成功地注释了没有货币符号的条形图，但我无法显示带有 $ 前缀的条形图。谁能解释一下这个

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

Answer 1

使用google的NumberFormatclass

您可以创建一个模式，并格式化每个数据列。

    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 图表 API 在堆叠条形图中使用符号进行注释

Annotation with symbols inside stacked bar charts using Google Chart API

javascript

charts

google-visualization

google-barchart