Question

是否可以使用Google Charts开发阈值？

我有一个包含5列的Google组合图表。理论上，我想使用addRange格式化程序功能来改变第二列的颜色，如果它低于50.（基本上它是一个动机工具。你的每日目标是至少进行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);

}

Answer 1

最简单的方法是快速检查数据，并根据该列的值为第二列的颜色设置变量。

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

  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列中的值进行着色。

谷歌图表门槛？

1 个答案: