javascript - 谷歌图表更改条形颜色

Question

我正在使用谷歌图表API使用Laravel框架在 Bootstrap 模式上显示图表，我遇到了问题，因为我无法更改条形的颜色并将一个蓝色和另一个绿色，另一个问题是，在右侧它只给我显示了酒吧的名称(RX)。

这是我的js代码:

// Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

  // Set a callback to run when the Google Visualization API is loaded.
  // google.charts.setOnLoadCallback(drawChart);

  // Callback that creates and populates a data table,
  // instantiates the pie chart, passes in the data and
  // draws it.
  function drawChart(nombre, unidad, tipo, valor, media) {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('number', 'RX');     
    data.addColumn({type: 'string', role: 'annotation'});

    data.addRows([
      ['Tú', parseInt(valor), valor+' '+unidad],
      ['Media', parseFloat(media), parseInt(media)+' '+unidad],
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1,1,2]);

    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));

    chart.draw(view, {
      // height: 400,
      // width: 600,
      series: {
        0: {
          type: 'bars'
        },
        1: {
          type: 'line',
          color: 'grey',
          lineWidth: 0,
          pointSize: 0,
          visibleInLegend: false
        }
      },
      vAxis: {
        maxValue: 100,
        minValue: 0,
      }
    });
    $("#myModalLabel").empty();
    $("#myModalLabel").append(tipo+" - "+nombre);
    $("#modalChart").modal();
  }

这是我得到的图表:

Answer 1

你可以像这样编写你的绘图函数

<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ["Element", "Density", { role: "style" } ],
    ["Copper", 8.94, "#b87333"],
    ["Silver", 10.49, "silver"],
    ["Gold", 19.30, "gold"],
    ["Platinum", 21.45, "color: #e5e4e2"]
  ]);

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
                   { calc: "stringify",
                     sourceColumn: 1,
                     type: "string",
                     role: "annotation" },
                   2]);

  var options = {
    title: "Density of Precious Metals, in g/cm^3",
    width: 600,
    height: 400,
    bar: {groupWidth: "95%"},
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
  chart.draw(view, options);
 }
 </script>

了解更多https://developers.google.com/chart/interactive/docs/gallery/columnchart#labeling-columns