Question

我试图创建一个动态柱形图，根据输入的信息更改值。我得到图表来更新数据，但我想更改已更改的列的颜色。

所以我问有没有办法用

更改列颜色

data.setValue(p, 1, y, '#FF0000');

如果不是我还能做什么？这是我的代码

function drawChart(){

 // Create and populate the data 


  table.var options = {
  title:"Production",
  width:900, 
  height:500,

  vAxis: {title: "Cups", minValue:0, maxValue:500},
  hAxis: {title: "Year"},

  };

  var data = new google.visualization.DataTable();    
  data.addColumn('string', 'N');
  data.addColumn('number', 'Value');
  data.addColumn({ type: 'string', role: 'style' });

  <?php     
   //---------------- Pull Data From Database and populate data------//

  $result = mysqli_query($'', "SELECT * FROM ''") or     die('Unable to run query:' . mysqli_error());


      $Qtyarr = array();
      $name = array();
            while ($row = mysqli_fetch_array($result)) {
                $Qtyarr[$row['seq']] = $row['itemQty'];
                $name[$row['seq']] = $row['itemNa'];
                }
        $table = "";                        
        foreach ($Qtyarr as $key => $item) {


            foreach ($name as $seq => $na){
            if($key == $seq){
                $table .= " data.addRow(['";
                $table .= $na. "',";
                $table .= $item. ",'#3399FF']);";
                    }

                }

            }


            echo $table;

?> 

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




 //----- depending on input change run function that edits google chart----//         
 $(document).on('change', 'input', function() {

 var id = $(this).attr('id');

 var tempArray = <?php echo json_encode($seqArr); ?>;
 var qtyArray =  <?php echo json_encode($Qtyarr); ?>;

      var qty = $(this).val();

        var carbon = tempArray[id].split("-");

        for(var i = 1; i < carbon.length; i = i+2){
            var p = 0;
            $.each(qtyArray, function(key, value) {

                if(key == carbon[i]){

                    var x = qty * carbon[i-1];
                    var y = value - x;


//----- This is where i set the new value and draw the chart 
the table updates but color doesn't change-----//   


                    data.setValue(p, 1, y, '#FF0000');
                    chart.draw(data, options);

                    }
                    p++;
        });
        }
    });       
}

我试着用类似的东西 var view = new google.visualization.DataView（data）;

                     view.setColumns([0, 1, {
                         type: 'string',
                         role: 'style',
                         calc: function (p) {
                             return (p) ? 'color: red' : null;
                             }
                             }]);

                             chart.draw(view, {
                                 height: 400,
                                 width: 600
                                 });

但它会更改所有列红色

谢谢：）

Google图表按功能

0 个答案: