使用 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"
  },
  2, {
   calc: "stringify",
   sourceColumn: 2,
   type: "string",
   role: "annotation"
  }
 ]);

 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

只需要包括样式列，
在您的数据视图列定义中...

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
]);

请参阅以下工作片段...

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

使用 Google 图表 API 对堆叠条形图着色

Colouring of stacked bar charts using Google Chart API

javascript

charts

google-visualization

google-barchart