Google图表 - 更改单个条形图颜色

6 回答

• 1

  这是一个更改颜色的代码示例 . 请注意，“colors”选项接受字符串数组 .

  var options = {
        title: 'Company Performance',
        hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
        colors: ['red','green'],
        is3D:true
  };
  

  回复于 2024-04-29T12:37:59+08:00
• 32

  参考https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors

  您可以将{role：'style'}添加到数据表中 . 对于您想要具有相同颜色的所有列，只需指定一个空样式'' . 然后，在您希望为红色的列上，您可以指定“红色”或“＃ff0000”或“颜色：红色”等 .

  // example from Google
  var data = google.visualization.arrayToDataTable([
      ['Element', 'Density', { role: 'style' }],
      ['Copper', 8.94, '#b87333'],            // RGB value
      ['Silver', 10.49, 'silver'],            // English color name
      ['Gold', 19.30, 'gold'],
      ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
  ]);
  

  回复于 2024-04-29T12:37:59+08:00
• 3

  正如Naveen建议的那样，你应该添加另一个系列以使其使用不同的颜色，但是如果你将 isStacked: true 添加到你的选项中，它会在彼此的顶部绘制条形而不是彼此相邻，并且不会改变它们的宽度或对齐，所以看起来不错 . 试试这个：

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
              data.addColumn('string', 'Year');
              data.addColumn('number', 'Sales');
              data.addColumn('number', 'SalesMax');
  
              data.addRows(4);
              data.setValue(0, 0, '2004');
              data.setValue(0, 1, 1000);
              data.setValue(0, 2, 0);
  
              data.setValue(1, 0, '2005');
              data.setValue(1, 1, 1170);
              data.setValue(1, 2, 0);
  
    /* NEED TO MAKE THIS BAR RED? */
              data.setValue(2, 0, '2006');
              data.setValue(2, 1, 0);
              data.setValue(2, 2, 1400);
  
              data.setValue(3, 0, '2007');
              data.setValue(3, 1, 1030);
              data.setValue(3, 2, 0);
  
  
              var chart = new google.visualization.BarChart(document.getElementById('visualization'));
    chart.draw(data, {isStacked: true, width: 400, height: 240, title: 'Company Performance',
                                vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                                series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                               });
  } ​
  

  回复于 2024-04-29T12:37:59+08:00
• 1

  您可以随时插入一个额外的列，因此它将具有不同的颜色 . 这就是我想的所有可以完成的事情 .

  function drawVisualization() {
    // Create and populate the data table.
    var data = new google.visualization.DataTable();
              data.addColumn('string', 'Year');
              data.addColumn('number', 'Sales');
              data.addColumn('number', 'SalesMax');
  
              data.addRows(4);
              data.setValue(0, 0, '2004');
              data.setValue(0, 1, 1000);
              data.setValue(0, 2, 0);
  
              data.setValue(1, 0, '2005');
              data.setValue(1, 1, 1170);
              data.setValue(1, 2, 0);
  
    /* NEED TO MAKE THIS BAR RED? */
              data.setValue(2, 0, '2006');
              data.setValue(2, 1, 0);
              data.setValue(2, 2, 1400);
  
              data.setValue(3, 0, '2007');
              data.setValue(3, 1, 1030);
              data.setValue(3, 2, 0);
  
  
              var chart = new google.visualization.BarChart(document.getElementById('visualization'));
              chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                                vAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
                                series: [{color: 'blue', visibleInLegend: true}, {color: 'red', visibleInLegend: false}]
                               });
  }
  

  回复于 2024-04-29T12:37:59+08:00
• 5

  series 对象数组或具有嵌套对象的对象

  一组对象，每个对象描述图表中相应系列的格式 . 要使用系列的默认值，请指定一个空对象{} . 如果未指定系列或值，则将使用全局值 . 每个对象都支持以下属性：

  color - 此系列使用的颜色 . 指定有效的HTML颜色字符串 . targetAxisIndex - 分配此系列的轴，其中0是默认轴，1是相反的轴 . 默认值为0;设置为1以定义图表，其中不同的系列针对不同的轴呈现 . 至少有一个系列被分配给默认轴 . 您可以为不同的轴定义不同的比例 .

  visibleInLegend - 布尔值，其中true表示系列应具有图例条目，false表示不应该 . 默认为true . 您可以指定一个对象数组，每个对象都按照给定的顺序应用于系列，或者您可以指定一个对象，其中每个子对象都有一个数字键，指示它应用于哪个系列 . 例如，以下两个声明是相同的，并将第一个系列声明为黑色且不在图例中，第四个系列为红色且不在图例中：

  series: {0:{color: 'black', visibleInLegend: false}, 3:{color: 'red', visibleInLegend: false}}
  

  回复于 2024-04-29T12:37:59+08:00
• 21

  我现在使用角色样式技术为生成动态数据的图表解决了这个问题，我使用随机函数生成颜色

  function random_color_part() {
  return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
  }
  
  function random_color() {
  return random_color_part() . random_color_part() . random_color_part();
  }
  then simply
  $color=random_color();
  print "['$rows[1]',$rows[2],'#$color'],\n";
  

  回复于 2024-04-29T12:37:59+08:00