Question

我一直在阅读和阅读，但我无法找到解决方案。

以下是我的代码，它100％有效，我想做的就是让每个条形图都有不同的颜色。

有人可以帮助我让每个酒吧都有不同的颜色吗？

我还需要30％的图例和70％的图表。

PHP

$rows = array();
$flag = true;
$table = array();
$table['cols'] = array(
    array('label' => 'NAME', 'type' => 'string'),
    array('label' => 'VALUE', 'type' => 'number'));
$rows = array();
while ($r = mysql_fetch_assoc($sth)) {
    $temp = array();
    $temp[] = array('v' => (string) $r['NAME']); 
    $temp[] = array('v' => (int) $r['VALUE']); 
    $rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);

JavaScript的：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
google.load('visualization', '1', { 'packages': ['corechart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
    var options = {
        title: 'Fund Value',
        is3D: 'true',
        colors: ["red"],
        width: 800,
        height: 600,
        legend: { textStyle: { fontSize: 10 }}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}
</script>

Answer 1

有几种方法可以使用彩条

1）使用colors配置选项

采用颜色字符串数组

colors: ['cyan', 'magenta', 'yellow', 'lime']

数组中的每种颜色将分配给数据表中的每个系列或列（在x轴之后）

要查看所有颜色，您需要四个系列列

var data = new google.visualization.DataTable({
  cols: [
    {label: 'X', type: 'string'},
    {label: 'A', type: 'number'},
    {label: 'B', type: 'number'},
    {label: 'C', type: 'number'},
    {label: 'D', type: 'number'}
  ],
  rows: [
    {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]}
  ]
});

2）使用'style' column role

'style'列角色是另一个数据表列，
在你想要设计风格的系列之后

列的值可以是颜色字符串

var data = new google.visualization.DataTable({
  cols: [
    {label: 'X', type: 'string'},
    {label: 'Y', type: 'number'},
    {role: 'style', type: 'string'}
  ],
  rows: [
    {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]},
    {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]},
    {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]},
    {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]}
  ]
});

注意： 'style'列角色不与图例同步
如果你必须有一个传奇，请参阅 - ＆gt; Example: Build custom legend

请参阅以下工作代码段，其中包含两个选项...

google.charts.load('current', {
  callback: function () {
    drawChartColumns();
    drawChartRows();
  },
  packages: ['corechart']
});

function drawChartColumns() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'string'},
      {label: 'A', type: 'number'},
      {label: 'B', type: 'number'},
      {label: 'C', type: 'number'},
      {label: 'D', type: 'number'}
    ],
    rows: [
      {c:[{v: 'Total'}, {v: 1}, {v: 2}, {v: 3}, {v: 4}]}
    ]
  });

  var options = {
    colors: ['cyan', 'magenta', 'yellow', 'lime'],
    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.BarChart(
    document.getElementById('chart_col')
  );
  chart.draw(data, options);
}

function drawChartRows() {
  var data = new google.visualization.DataTable({
    cols: [
      {label: 'X', type: 'string'},
      {label: 'Y', type: 'number'},
      {role: 'style', type: 'string'}
    ],
    rows: [
      {c:[{v: 'Category A'}, {v: 1}, {v: 'cyan'}]},
      {c:[{v: 'Category B'}, {v: 2}, {v: 'magenta'}]},
      {c:[{v: 'Category C'}, {v: 3}, {v: 'yellow'}]},
      {c:[{v: 'Category D'}, {v: 4}, {v: 'lime'}]}
    ]
  });

  var options = {
    legend: {
      position: 'top'
    }
  };

  var chart = new google.visualization.BarChart(
    document.getElementById('chart_row')
  );
  chart.draw(data, options);
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div>COLUMNS</div>
<div id="chart_col"></div>
<div>ROWS</div>
<div id="chart_row"></div>

Google以不同颜色绘制条形图

1 个答案: