javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars-6ren

javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars

转载作者：行者123 更新时间：2023-11-28 00:32:41

25

4

我们如何将下方“已执行”列的默认颜色更改为“绿色”，将“未执行”列的默认颜色更改为“红色”？我尝试使用系列/颜色，但没有成功。

我尝试在选项和下面的 View 中添加颜色参数、系列。没有任何效果。

代码:

<html>
       <head>
          <title>Google Charts Tutorial</title>
          <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
          </script>
          <script type = "text/javascript">
             google.charts.load('current', {packages: ['corechart']});     
          </script>
           <script language = "JavaScript">
             function drawChart(){
                // Define the chart to be drawn.
                var data = google.visualization.arrayToDataTable([
                   ['Status', 'Outcome', { role: 'style' }],
                   ['Executed', 70,'green'],
                   ['Not Executed', 5,'red']
                ]);

        var groupData = google.visualization.data.group(
        data,
        [{column: 0, modifier: function () {return 'total'}, type:'string'}],
        [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
      );

      var formatPercent = new google.visualization.NumberFormat({
        pattern: '#,##0.0%'
      });

      var formatShort = new google.visualization.NumberFormat({
        pattern: 'short'
      });

      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1, {
        calc: function (dt, row) {
          var amount =  formatShort.formatValue(dt.getValue(row, 1));
          var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
          return amount + ' (' + percent + ')';
        },
        type: 'string',
        role: 'annotation'
      }]);

            var options = { title: 'Google charts', 'legend':'none'}; 

            var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
            chart.draw(view, options);
         }
         google.charts.setOnLoadCallback(drawChart);
          </script>
       </head>

       <body>
     <table border='1px' cellpadding='5' cellspacing='0' style='border: solid 1px Silver; font-size: x-small;width: 100%'>
     <tr align='center' valign='top'>
    <td align='center' style='width:100px' valign='center' bgcolor='white'>
        <div id="container1" style="width:400; height:280"></div>
    </td>
     </tr>
    </table>
       </body>
    </html>

我需要做的就是将条形图的蓝色更改为绿色和红色。请检查并提供帮助。

最佳答案

在数据 View 中，需要包含来自数据表的样式 Angular 色的列索引...

var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2, {  // <-- include column index 2 for style role
  calc: function (dt, row) {
    var amount =  formatShort.formatValue(dt.getValue(row, 1));
    var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
    return amount + ' (' + percent + ')';
  },
  type: 'string',
  role: 'annotation'
}]);

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

google.charts.load('current', {packages: ['corechart']});
function drawChart(){
  // Define the chart to be drawn.
  var data = google.visualization.arrayToDataTable([
     ['Status', 'Outcome', { role: 'style' }],
     ['Executed', 70,'green'],
     ['Not Executed', 5,'red']
  ]);

  var groupData = google.visualization.data.group(
    data,
    [{column: 0, modifier: function () {return 'total'}, type:'string'}],
    [{column: 1, aggregation: google.visualization.data.sum, type: 'number'}]
  );

  var formatPercent = new google.visualization.NumberFormat({
    pattern: '#,##0.0%'
  });

  var formatShort = new google.visualization.NumberFormat({
    pattern: 'short'
  });

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2, {
    calc: function (dt, row) {
      var amount =  formatShort.formatValue(dt.getValue(row, 1));
      var percent = formatPercent.formatValue(dt.getValue(row, 1) / groupData.getValue(0, 1));
      return amount + ' (' + percent + ')';
    },
    type: 'string',
    role: 'annotation'
  }]);

  var options = { title: 'Google charts', 'legend':'none'};

  var chart = new google.visualization.ColumnChart(document.getElementById('container1'));
  chart.draw(view, options);
}
google.charts.setOnLoadCallback(drawChart);

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container1"></div>

关于javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57971727/

25

4

0

文章推荐： html - 将 CSS 类设置为 Angular 组件问题

文章推荐： c++ - Qt GUI 小部件源文件的重构/分区

文章推荐： html - div 中的图像在图像下方有额外的空间

文章推荐： html - CSS:防止 Unicode 字符的 'font-size' 增加其父容器维度

Python:import foo.bar as bar vs from foo import bar
鉴于 foo.bar是一个模块，有什么区别 import foo.bar as bar 和 from foo import bar 我对延迟导入模块对此有何影响特别感兴趣。注意:这不是 this q
python + matplotlib : how to make a bar diagram combining 1 bar and 2 bars?
我正在寻找一个选项来创建组合了 1 个条形图(每个索引)和 2 个条形图的条形图。像这样: 我可以假装制作一个 2 条形图，将 0 放入第一组条形图，然后手动绘制一个条形图……但是有更优雅的方法吗？
python - : if not a == 'bar' and if a ! = 'bar' 之间有显着差异吗？
这只是编写相同代码的两种方式吗？有什么我应该注意的功能差异吗？ >>> a = 'foo' >>> if not a == 'bar': ... 'its not' ... 'its not'
Android AChartEngine - Bar over Bar
通常条形图中的条形并排对齐。我怎样才能让它们位于前一个之上？所以我会考虑创建我已经拥有的系列并将它们添加到渲染器，但告诉渲染器将新系列放在现有系列之上，而不是将其放在现有系列旁边。仅计算最大值并仅显示
javascript - Amcharts 4 : How to highlight bar/column on click of bar/column in bar plots
我试图在 Amchart 4 中点击条形图/列时突出显示条形图/列。使用下面的代码，我正在获取当前点击的条形图/列的值，但使用的是 column.isActive 属性，条形/列未突出显示。我找到了
javascript - 搜索并替换 moduleFor ('foo:bar' ) 为 moduleFor ('foo:bar' , 'unit@foo:bar' )
我正在名为“tests”的文件夹中处理大量 qunit 单元测试。每个文件的顶部如下所示，例如: moduleFor('mixin:foo') // or moduleFor('route:bar')
python - 在 python 中， 'import foo.bar as bar' 和 'from foo import bar' 有什么区别？
我在 pyTorch 和 matplotlib 中看到了这个约定: import torch.nn as nn import torch.optim as optim import matplotli
lua - 在名为 foo.lua 的 Lua 文件中，名为 self.bar、foo.bar 和 bar 的变量之间有什么区别？
与我的示例平行的是，我正在构建一个游戏并有一个名为 player.lua 的类。几周前我编写了这个代码，当时我还不太了解 Lua 的工作原理，所以我没有为播放器构建的表格。我已经为玩家分配了各种属
c++ - 类 Bar *bar 之类的指针的名称是什么
一个简单的例子: void foo(class Bar * bar) { foo2(bar); } void foo2(Bar * bar) { bar->a++; } foo2 中使
rust - 如何在rust宏中从 “Bar”获得 “Foo::Bar”？
原始需求:我想实现一个将Foo::*转换为Bar::*的宏。伪代码将如下所示: macro_rules! convert_foo_to_bar { ($v: ty, $p: path) =>
javascript - 其中之一更快 : if (! foo < bar) if (foo > bar)？
出于好奇。我检查某个字符串是否超过指定的最大长度: var name = "This Is a Name"; if (!name.length >= 10) { //valid length
javascript - export * as bar VS export { 默认为 bar }
之间有什么区别 export * as bar from 'foo' 和 export { default as bar } from 'foo' 在我的特殊情况下，我尝试了以下两种方法，它们都有效，
Perl "my $bar if 0;"与 "my $bar = undef if 0;"
以下代码会返回错误， $ perl -E'sub foo { my $bar if 0; $bar++ }' This use of my() in false conditional is no l
language-features - [foo, bar] = ["foo", "bar"] 特征的名称是什么？
我需要知道一些语言提供的这个很酷的特性的正确名称。仅供引用:在某些语言中，可以通过将值结构分配给“变量”结构来进行多重分配。在问题标题的示例中，它将“foo”分配给 foo，将“bar”分配给 ba
javascript - 在javascript中， `{foo : "bar"}` and ` {"foo":"bar"}`有什么区别？
这个问题在这里已经有了答案: 关闭 11 年前。 Possible Duplicate: What is the difference between object keys with quotes
java - 正则表达式:找到 "bar"但找不到 "foo bar"
我们要搜索一个文件以找到前面没有“foo”的“bar”的所有实例(忽略前面的空格和后面的任何内容。) 所以如果我们有 foo foo bar baz bar a bunch of monkey
java - 为什么F 未分配给 F
这是一个 SSCCE : import java.util.*; class Test { public static void main(String[] args) { b
javascript - 版本控制网站插件(例如 Wibiya bar、Meebo bar)
我正在开发一个插件，该插件将添加到外部站点，例如 Meebo/Wibiya 栏。我正在研究如何对我的文件进行版本控制。我想要实现的目标: 网站只需添加几行到他们的网站。如果我选择的话，我将能够以静
javascript - Highcharts : How to calculate the distance between each bar in Bar chart
我需要在没有省略号的情况下显示标签中的所有文本，但我无法预测标签将占用的行数。是否可以在每个标签和展示之间留出一些边距中心的条与标签对齐？ (有或没有改变每条之间的距离) 是否可以计算每个条之间的距
c - foo->bar 和 &foo->bar 有什么区别？
1. struct thread_args { 2. int thread_id; 3. struct timeval before; 4. struct timeval after

首页

博学

6Ren·AI

商城

javascript - 谷歌图表 API :Set ColumnChart Bar color for individual bars