Google 根据结果 MySQL 和 PHP 使用不同颜色的图表条

Question

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
      ['Username', 'Total Sales'],
      <?php
      while($sub_row = mysqli_fetch_array($result2))
      {
        echo "['".$sub_row["date"]."', ".$sub_row["number"]."],";
      }
      ?>
    ]);
    var options = {
      title : 'Month & Yearly Total Sales Values',
      vAxis: {title: 'Total Sales'},
      hAxis: {title: 'Month & Year'},
      seriesType: 'bars',
      series: {5: {type: 'line'}}
    };
    var chart = new google.visualization.ComboChart(document.getElementById('Salesman'));
    chart.draw(data, options);
  }
</script>

<?php
$con = mysqli_connect('localhost','handsmec_sales','handsmec_sales','handsmec_sales_portal') or die(mysqli_error());
$query2 = "SELECT DATE_FORMAT(order_datetime,'%Y') as date, SUM(order_total_after_tax) as number FROM tbl_order where status='Confirmed' and type='PROFORMA INVOICE' GROUP BY DATE_FORMAT(order_datetime,'%Y')";
$result2 = mysqli_query($con, $query2);
?>

<div id="Salesman" style="width: 650px; height: 500px;"></div>

结果会像附件一样显示Result of the code 我需要一个条形图，根据年份使用不同的颜色，我尝试使用颜色：青色、红色代码，但它会反映任何解决方案的第一种颜色??

Answer 1

Output of below code您可以使用下面的代码

<script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
<script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawVisualization);

  function drawVisualization() {
    var data = google.visualization.arrayToDataTable([
      ['Username', 'Total Sales',{role: 'style'}],

       ['xyz', 200,'#f44336'],
       ['tyu', 400,'#e91e63'],
       ['jhon',100,'#9c27b0']


    ]);
    var options = {
      title : 'Month & Yearly Total Sales Values',
      vAxis: {title: 'Total Sales'},
      hAxis: {title: 'Month & Year'},
      seriesType: 'bars',
      //colors: ['#009900', '#e0440e']
      //series: {5: {type: 'line'}}
    };
    var chart = new google.visualization.ComboChart(document.getElementById('Salesman'));
    chart.draw(data, options);
  }

Answer 2

试试这个：

https://codepen.io/dichado/pen/qBEyKEL

颜色条在此处设置为属性样式：

["Element", "Density", { role: "style" } ]

来自集合 ["Element"、"Density"、"style"]：

        ["Copper", 8.94, "#b87333"],
        ["Silver", 10.49, "silver"],
        ["Gold", 19.30, "gold"],
        ["Platinum", 21.45, "color: #e5e4e2"]

Answer 3

这是正确的解决方案。

   <script type="text/javascript">
  google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawColumnChart);
    function drawColumnChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Total sales', { role: 'style' }, { role: 'annotation' }],
        <?php
        for($i=0;$i<$resultCount;$i++){
          ?>[<?php echo "'".$date[$i]."', ".$number[$i].", '".$color[$i]."' , "."'".$number[$i]."'" ?>],
        <?php } 
        ?>
        ]);


      var options = {
        title: "Yearly Sales report",
        chartArea: {width: '50%'},
        legend: { position: "none" },
      };
      var chart = new google.visualization.ColumnChart(document.getElementById("column-chart"));
      chart.draw(data, options);
  }
  </script>

<?php 
    if($_SESSION['role'] == "Manager") {
        
    $query2 = "SELECT DATE_FORMAT(order_datetime,'%Y') as date, SUM(order_total_after_tax) as number FROM tbl_order where status='Confirmed' and type='PROFORMA INVOICE' GROUP BY DATE_FORMAT(order_datetime,'%Y')";  
    $result2 = mysqli_query($con, $query2);
    $resultCount=$result2->num_rows;

    $color = ['#dc7877','#9cbb73','#9ee2d9','#9f9ee2','#e29eba'];
    $date = array();
    $number = array();
    foreach ($result2 as $peopleData) {
    $date[] = $peopleData['date'];
    $number[] = $peopleData['number'];
    } 
    ?>
    <div id="column-chart" style="width: 650px; height: 500px;"></div>

Result has been attached as Image

Google 根据结果 MySQL 和 PHP 使用不同颜色的图表条

Google charts bars in different colors based on Result MySQL And PHP

javascript

php

mysql

ajax

google-visualization