1

是否可以使用 Google Charts 制定阈值？

我有一个 5 列的 Google 组合图表。理论上，如果第二列低于 50，我想使用 addRange 格式化函数来更改它的颜色。（基本上它是一个激励工具。你的每日目标是至少拨打 50 次电话。如果你不这样做，图表显示向上为红色，如果你这样做，那么它是默认颜色）

这是我当前创建图表的代码，而不是格式。谢谢。

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

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

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

    var data = new google.visualization.DataTable();

    data.addColumn('string', 'Rep');
    data.addColumn('number', 'Yesterday');
    data.addColumn('number', 'Last 7');
    data.addColumn('number', 'Last 30');
    data.addColumn('number', 'The Bar');

    $("#data-table thead th").each(function(){

        var initials = $(this).text();

        var yesterday = parseInt($("." + initials + ".Yesterday").text());

        var seven = parseInt($("." + initials + ".seven").text());

        var thirty = parseInt($("." + initials + ".thirty").text());

        data.addRow([initials, yesterday, seven, thirty, 50]);

    });

  // Set chart options
  var title = $("#data-table caption").text();
  var options = {'title':title,
                 seriesType: 'bars',
                 series: {3: {type: "line"}},
                 hAxis: {title: 'Rep'},
                 vAxis: {title: 'Outbound Calls'}

                };

    var formatter = new google.visualization.TableColorFormat();

    formatter.addRange(50,0, 'red', '#000');

    formatter.format(data, 1);

  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.ComboChart(document.getElementById('call-log'));
  chart.draw(data, options);

}
4

1 回答 1

0

最简单的方法是快速检查您的数据，并根据该列的值为系列 2 的颜色设置一个变量。

所以目前你有以下选项代码：

  var options = {'title':title,
                 seriesType: 'bars',
                 series: {3: {type: "line"}},
                 hAxis: {title: 'Rep'},
                 vAxis: {title: 'Outbound Calls'}

                };

如果你稍微改变一下，你可以根据一个变量使系列 2 着色：

  var options = {'title':title,
                 seriesType: 'bars',
                 series: {
                            3: {type: "line"}
                            // set the color of column 2 (series #1) via variable
                            1: {color: colorvar}
                         },
                 hAxis: {title: 'Rep'},
                 vAxis: {title: 'Outbound Calls'}

                };

然后你可以创建一个 javascript 函数来确定第 2 列的值是什么，并适当地着色：

var colorvar = "#FF0000";
if (data.getValue(0,1) >= 50)
  colorvar = "#000000";

这样，如果值低于 50，就会被读取。否则会变成黑色。然后，当您创建选项时，它将使用此函数指定的任何颜色。这样您就可以根据第 2 列中的值进行着色。

于 2013-05-13T00:19:40.593 回答