基于 Result 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>结果将显示为附加图像 我需要成为条形图的代码结果将根据年份不同颜色，我尝试着色：青色，红色代码，但它会反映任何解决方案的第一种颜色？？

Answer 1

这是正确的解决方案。

   <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>

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']});     

      </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);

  }