javascript - 编写一个查找值并返回颜色的循环

Question

我正在尝试获取 Google 柱形图以在值更改时更改列颜色。因此，当值为“5”时，该列将为红色，如果为“1”，则为绿色。

我无法让它工作。我知道这与循环有关，但在循环方面我是一个完全的初学者。基本上我希望数据行中的第二个值(数字)触发 myColors 变量的颜色变化......

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart1);

     function drawChart1() {
        var data = new google.visualization.DataTable();        
          data.addColumn('string', 'Status');
          data.addColumn('number', 'Value');
          data.addColumn({type: 'string', role: 'style'});
          data.addRow(['Environmental', 2, slicesColor]);
          data.addRow(['Best Available Data', 5, slicesColor]);
          data.addRow(['Approach Roadways', 4, slicesColor]);
          data.addRow(['Structure', 1, slicesColor]);
          data.addRow(['Hydraulics', 5, slicesColor]);
          data.addRow(['Geotechnical', 3, slicesColor]);

        var myColors = { '1' : 'green', '2': '#000000', '3': 'yellow', '4': 'orange', '5': 'red'  };

        var slicesColor = {};

        for( var i=0; i < data.getNumberOfRows(); i++){
          slicesColor[i] = {color: myColors[data.getValue(i, 0)] };
        }

        var options = {
          legend: { position: "none" },
          slices: slicesColor,
          title: 'Risk Categories'
        }

            // Create and draw the visualization.
            var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
            chart.draw(data, options);   

    }

http://jsfiddle.net/pixelmix/bvpmv8d6/3/

我在另一个图表库中找到了这个示例，但我不知道如何将其转换为与 Google 图表 API 一起使用: http://canvasjs.com/example/gallery/dynamic/live_column/

Answer 1

用于为 google.visualization.ColumnChart 类 的列着色 style role打算。根据the documentation :

The style role lets your control several aspects of column appearance with CSS-like declarations:

• color
• opacity
• fill-color
• fill-opacity
• stroke-color
• stroke-opacity
• stroke-width

你可以替换:

for( var i=0; i < data.getNumberOfRows(); i++){
   slicesColor[i] = {color: myColors[data.getValue(i, 0)] };
}

与

for (var i = 0; i < data.getNumberOfRows() ; i++) {
    var key = data.getValue(i, 1);
    data.setValue(i, 2, 'color:' + myColors[key]);
}

示例

google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart1);

function drawChart1() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Status');
    data.addColumn('number', 'Value');
    data.addColumn({ type: 'string', role: 'style' });
    data.addRow(['Environmental', 2, null]);
    data.addRow(['Best Available Data', 5, null]);
    data.addRow(['Approach Roadways', 4, null]);
    data.addRow(['Structure', 1, null]);
    data.addRow(['Hydraulics', 5, null]);
    data.addRow(['Geotechnical', 3, null]);

    var myColors = { '1': 'green', '2': '#000000', '3': 'yellow', '4': 'orange', '5': 'red' };

    var slicesColor = {};
    for (var i = 0; i < data.getNumberOfRows() ; i++) {
        var key = data.getValue(i, 1);
        data.setValue(i, 2, 'color:' + myColors[key]);
    }

    var options = {
        legend: { position: "none" },
        //slices: slicesColor,
        title: 'Risk Categories'
    }

    // Create and draw the visualization.
    var chart = new google.visualization.ColumnChart(document.getElementById('chart'));
    chart.draw(data, options);
}

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="chart"></div>