1

Google チャートでしきい値を作成することは可能ですか?

5 列の Google コンボ チャートがあります。理論的には、addRange フォーマッター関数を使用して、2 番目の列が 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 に答える