基于 Result MySQL 和 PHP 的不同颜色的谷歌图表条答案

【问题标题】：Google charts bars in different colors based on Result MySQL And PHP基于 Result MySQL 和 PHP 的不同颜色的谷歌图表条
【发布时间】：2020-01-15 05:48:15
【问题描述】：

<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 我需要一个条形图，根据年份不同颜色，我尝试颜色：青色，红色代码，但它会反映任何解决方案的第一种颜色？？

【问题讨论】：

标签： javascript php mysql ajax google-visualization

【解决方案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);
  }

【讨论】：

更新的代码需要再次检查。现在它正在使用 {role: 'style'} 并赋予颜色

【解决方案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"]

【讨论】：

它可以手动工作数据可以为不同的栏获得颜色，这很好，但我不问这个。我从 Mysql 得到结果，不同年份将从数据库中获取如何在条形图上提供不同的颜色，这是我的问题？
在需要的地方将其更改为，$var 应该来自 SQL 的正确格式。类似于： var data = google.visualization.arrayToDataTable([ ['Year',{ role: "style" }], ]);

【解决方案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

【讨论】：