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

这是正确的解决方案。&nbsp; &nbsp;<script type="text/javascript">&nbsp; google.charts.load("current", {packages:['corechart']});&nbsp; &nbsp; google.charts.setOnLoadCallback(drawColumnChart);&nbsp; &nbsp; function drawColumnChart() {&nbsp; &nbsp; &nbsp; var data = google.visualization.arrayToDataTable([&nbsp; &nbsp; &nbsp; &nbsp; ['Year', 'Total sales', { role: 'style' }, { role: 'annotation' }],&nbsp; &nbsp; &nbsp; &nbsp; <?php&nbsp; &nbsp; &nbsp; &nbsp; for($i=0;$i<$resultCount;$i++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ?>[<?php echo "'".$date[$i]."', ".$number[$i].", '".$color[$i]."' , "."'".$number[$i]."'" ?>],&nbsp; &nbsp; &nbsp; &nbsp; <?php }&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; ?>&nbsp; &nbsp; &nbsp; &nbsp; ]);&nbsp; &nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; &nbsp; title: "Yearly Sales report",&nbsp; &nbsp; &nbsp; &nbsp; chartArea: {width: '50%'},&nbsp; &nbsp; &nbsp; &nbsp; legend: { position: "none" },&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; var chart = new google.visualization.ColumnChart(document.getElementById("column-chart"));&nbsp; &nbsp; &nbsp; chart.draw(data, options);&nbsp; }&nbsp; </script><?php&nbsp;&nbsp; &nbsp; if($_SESSION['role'] == "Manager") {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $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')";&nbsp;&nbsp;&nbsp; &nbsp; $result2 = mysqli_query($con, $query2);&nbsp; &nbsp; $resultCount=$result2->num_rows;&nbsp; &nbsp; $color = ['#dc7877','#9cbb73','#9ee2d9','#9f9ee2','#e29eba'];&nbsp; &nbsp; $date = array();&nbsp; &nbsp; $number = array();&nbsp; &nbsp; foreach ($result2 as $peopleData) {&nbsp; &nbsp; $date[] = $peopleData['date'];&nbsp; &nbsp; $number[] = $peopleData['number'];&nbsp; &nbsp; }&nbsp;&nbsp; &nbsp; ?>&nbsp; &nbsp; <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"]:&nbsp; &nbsp; &nbsp; &nbsp; ["Copper", 8.94, "#b87333"],&nbsp; &nbsp; &nbsp; &nbsp; ["Silver", 10.49, "silver"],&nbsp; &nbsp; &nbsp; &nbsp; ["Gold", 19.30, "gold"],&nbsp; &nbsp; &nbsp; &nbsp; ["Platinum", 21.45, "color: #e5e4e2"]

Answer 3

以下代码的输出您可以使用以下代码<script type = "text/javascript">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;google.charts.load('current', {packages: ['corechart']});&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; </script><script type="text/javascript">&nbsp; google.charts.load('current', {'packages':['corechart']});&nbsp; google.charts.setOnLoadCallback(drawVisualization);&nbsp; function drawVisualization() {&nbsp; &nbsp; var data = google.visualization.arrayToDataTable([&nbsp; &nbsp; &nbsp; ['Username', 'Total Sales',{role: 'style'}],&nbsp; &nbsp; &nbsp; &nbsp;['xyz', 200,'#f44336'],&nbsp; &nbsp; &nbsp; &nbsp;['tyu', 400,'#e91e63'],&nbsp; &nbsp; &nbsp; &nbsp;['jhon',100,'#9c27b0']&nbsp; &nbsp; ]);&nbsp; &nbsp; var options = {&nbsp; &nbsp; &nbsp; title : 'Month & Yearly Total Sales Values',&nbsp; &nbsp; &nbsp; vAxis: {title: 'Total Sales'},&nbsp; &nbsp; &nbsp; hAxis: {title: 'Month & Year'},&nbsp; &nbsp; &nbsp; seriesType: 'bars',&nbsp; &nbsp; &nbsp; //colors: ['#009900', '#e0440e']&nbsp; &nbsp; &nbsp; //series: {5: {type: 'line'}}&nbsp; &nbsp; };&nbsp; &nbsp; var chart = new google.visualization.ComboChart(document.getElementById('Salesman'));&nbsp; &nbsp; chart.draw(data, options);&nbsp; }